diff options
Diffstat (limited to 'portal')
48 files changed, 13013 insertions, 0 deletions
diff --git a/portal/pom.xml b/portal/pom.xml new file mode 100644 index 0000000..aa63a25 --- /dev/null +++ b/portal/pom.xml @@ -0,0 +1,41 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + + Copyright 2016-2017 ZTE Corporation. + + 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. + +--> +<project xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://maven.apache.org/POM/4.0.0" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> + <parent> + <groupId>org.onap.aai.esr-gui</groupId> + <artifactId>aai-esr-gui-parent</artifactId> + <version>1.0.0-SNAPSHOT</version> + </parent> + <modelVersion>4.0.0</modelVersion> + <artifactId>aai-esr-gui-portal</artifactId> + <version>1.0.0-SNAPSHOT</version> + <packaging>war</packaging> + <name>esr-gui/portal</name> + <build> + <plugins> + <plugin> + <groupId>org.apache.maven.plugins</groupId> + <artifactId>maven-war-plugin</artifactId> + <configuration> + <failOnMissingWebXml>false</failOnMissingWebXml> + </configuration> + </plugin> + </plugins> + </build> +</project> diff --git a/portal/src/main/webapp/extsys/ems/css/animate.min.css b/portal/src/main/webapp/extsys/ems/css/animate.min.css new file mode 100644 index 0000000..3b04801 --- /dev/null +++ b/portal/src/main/webapp/extsys/ems/css/animate.min.css @@ -0,0 +1,21 @@ +/** + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ +@charset "UTF-8";/*! +Animate.css - http://daneden.me/animate +Licensed under the MIT license - http://opensource.org/licenses/MIT + +Copyright (c) 2014 Daniel Eden +*/.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}@-webkit-keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);-ms-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);-ms-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);-ms-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);-ms-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);-ms-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);-ms-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);-ms-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);-ms-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}@keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);-ms-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);-ms-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);-ms-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);-ms-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);-ms-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}.swing{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes tada{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);-ms-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);-ms-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);-ms-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;transform:none}}@keyframes wobble{0%{-webkit-transform:none;-ms-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);-ms-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);-ms-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);-ms-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);-ms-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);-ms-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);-ms-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);-ms-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);-ms-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);-ms-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);-ms-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);-ms-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);-ms-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);-ms-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);-ms-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);-ms-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);-ms-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);-ms-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);-ms-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);-ms-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);-ms-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);-ms-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);-ms-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);-ms-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);-ms-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);-ms-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);-ms-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);-ms-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-ms-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-ms-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);-ms-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;-ms-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);-ms-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);-ms-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);-ms-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);-ms-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;transform:none;opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);-ms-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);-ms-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);-ms-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);-ms-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);-ms-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);-ms-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);-ms-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0,0,1,45deg);transform:rotate(0,0,1,45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0,0,1,45deg);-ms-transform:rotate(0,0,1,45deg);transform:rotate(0,0,1,45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);-ms-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);-ms-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);-ms-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);-ms-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);-ms-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}@keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);-ms-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-ms-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-ms-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);-ms-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);-ms-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/ems/css/ems.css b/portal/src/main/webapp/extsys/ems/css/ems.css new file mode 100644 index 0000000..6838e7e --- /dev/null +++ b/portal/src/main/webapp/extsys/ems/css/ems.css @@ -0,0 +1,553 @@ +/** + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ +body { + font-family: microsoft yahei !important; +} + +/* blue pill (inspired by iTunes) +*******************************************************************************/ + +.grey { + background-color: #e5e5e5; + color: #333; +} + +.blue { + + background-color: #5b9bd1; + border-radius: 20px; + color: #fff; + font-weight: bold; + padding: 8px 0; + text-align: center; + width: 100px; +} + +.blue:hover { + background-color: #e8f3fd; + color: #5b9bd1; +} + +.blue.selected { + border: 0; + background-color: #5b9bd1; + color: #fff; +} + +.blue.selected:hover { + border: 0; + background-color: #5b9bd1; + color: #fff; +} + +p { + color: #444; + font-size: 14px; + font-weight: normal; + line-height: 21px; + margin: 0 0 12px 0; +} + +p.credit { + border-top: 1px solid #ccc; + font-size: 14px; + line-height: 140%; + margin: 36px 0 12px 0; + padding: 8px 0 0 0; + text-align: center; +} + +ul.column { + float: left; + list-style: none; + width: 675px; +} + +ul.column li { + background: #eee; + -webkit-border-radius: 5px; + border-radius: 5px; + -webkit-box-shadow: inset 0 1px 1px 0 #c7c7c7; + box-shadow: inset 0 1px 1px 0 #c7c7c7; + float: left; + margin: 10px 0 0 10px; + display: block; + height: 150px; + text-align: center; + width: 215px; +} + +/* Clear Floated Elements +------------------------------------------------------------------------------*/ +.column:after, .button-collection:after, .clearfix:after, div.project-info:after { + clear: both; + content: ' '; + display: block; + font-size: 0; + line-height: 0; + visibility: hidden; + width: 0; + height: 0; +} + +.container-fluid { + background-color: white !important; + min-height: 500px; +} + +.nav-tabs { + border: 0; +} + +.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { + border: 0; + border-top: 3px solid #F3565D; +} + +.nav-tabs > li > a { + border-radius: 0; +} + +.nav-tabs > li > a:hover { + background-color: #f1f3fa; + border: 1Px solid #f1f3fa; +} + +.c3 { + margin-top: 120px; +} + +.skills-chart-breadcrumb { + +} + +.blue:selected { + border: 0; + background-color: #5b9bd1; +} + +.btn { + /* border-width: 0; */ + /* padding: 7px 14px; */ + /* font-size: 14px; */ + /* outline: none !important; */ + /* background-image: none !important; */ + /* filter: none; */ + /* -webkit-box-shadow: none; */ + -moz-box-shadow: none; + /* box-shadow: none; */ + /* text-shadow: none; */ +} + +select { + border-width: 1px; + padding: 4px 1px; + border-radius: 4px; +} + +.input-sm { + padding: 4px 10px; +} + +.btn-block { + display: block; + width: 100%; + padding-left: 0; + padding-right: 0; +} + +/* Bootstrap buttons */ + +.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active { + color: #333; + background-color: #ededed; + border-color: #b3b3b3; +} + +.open .btn-default.dropdown-toggle { + color: #333; + background-color: #ededed; + border-color: #b3b3b3; +} + +.btn-default:active, .btn-default.active { + background-image: none; + background-color: #e0e0e0; + font-weight: bold; +} + +.btn-default:active:hover, .btn-default.active:hover { + background-color: #e6e6e6; +} + +.open .btn-default.dropdown-toggle { + background-image: none; +} + +.btn-default.disabled, .btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled:active, .btn-default.disabled.active, .btn-default[disabled], .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled]:active, .btn-default[disabled].active, fieldset[disabled] .btn-default, fieldset[disabled] .btn-default:hover, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default.active { + background-color: #fff; + border-color: #ccc; +} + +.btn-default .badge { + color: #fff; + background-color: #333; +} + +.btn-default > i[class^="icon-"], .btn-default > i[class*="icon-"] { + color: #8c8c8c; +} + +div[data-name="tab_zone"] div { + background-color: #f1f3fa; + padding: 0px; +} + +div[data-name="cond_zone"] div { + background-color: #fff; + margin-top: 15px; + margin-bottom: 15px; +} + +div[data-name="res-conds-zone"] { + display: inline; +} + +div[data-name="res-conds-zone"] select, div[data-name="res-conds-zone"] span { + /**height:33px;*/ + margin-left: 15px; + color: #5b9bd1; + border-color: #ccc; + font-weight: bold; +} + +.input { + width: 250px; + height: 34px; + padding: 6px 12px; + font-size: 14px; + line-height: 1.42857143; + color: #555; + background-color: #fff; + background-image: none; + border: 1px solid #ccc; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); + -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; +} + +div.separator { + margin: 20px; +} + +div.separator div { + text-align: center; + line-height: 0; +} + +div.separator-line { + height: 1px !important; + width: 100%; + background: #ddd; + overflow: hidden; +} + +.dropdown-toggle { + color: #5b9bd1; +} + +.calendar-date { + color: #5b9bd1; +} + +.range_inputs { + color: #5b9bd1; +} + +.btn.dropdown-toggle, .btn-group .btn.dropdown-toggle, .btn:hover, .btn:disabled, .btn[disabled], .btn:focus, .btn:active, .btn.active { + outline: none !important; + background-image: none !important; + filter: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + text-shadow: none; +} + +#skills-chart-breadcrumb { + margin-bottom: 10px +} + +/*增加daterangepicker的css*/ +input[name="daterange"] { + width: 220px; + line-height: 0; + height: 31px; + vertical-align: top; + margin-top: 2px; +} + +.daterangepicker .ranges { + width: 205px; +} + +.daterangepicker .ranges input { + width: 95px !important; +} + +td.details-control { + cursor: pointer; +} + +tr.shown td.details-control { +} + +.details table td { + word-wrap: break-word; + word-break: normal; + border-top: 1px solid #dddddd; +} + +.details table tr:first-child td { + border-top: none; +} + +.details table { + table-layout: fixed; + width: 100%; +} + +td.title { + width: 10%; +} + +table.dataTable tbody th, table.dataTable tbody td { + padding: 8px 10px; +} + +div.dataTables_length, div.dataTables_info { + display: inline; +} + +div.dataTables_paginate { + display: inline; + float: right; +} + +div.pagination-panel { + margin-right: 10px; +} + +input.pagination-panel-input { + width: 50px; +} + +#ict_res_table_div { + margin-top: 15px; +} + +#ict_res_table_div label { + font-weight: 100; +} + +.daterangepicker .daterangepicker_start_input label, .daterangepicker .daterangepicker_end_input label { + color: #5b9bd1; +} + +.daterangepicker .ranges .input-mini { + color: #5b9bd1; +} + +.cancelBtn { + padding: 5px 10px 5px 10px; +} + +.btn:focus, .btn:active:focus, .btn.active:focus { + outline: 0; +} + +#ict_res_table_div table { + width: 100% !important; +} + +.control-label .required { + color: #e02222; + font-size: 12px; + padding-left: 2px; +} + +#ict_vim_table tbody tr { + cursor: pointer; +} + +/*卡片面板样式*/ +.animated-panel { + -webkit-animation-duration: .5s; + animation-duration: .5s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-delay: 0.1s; +} + +.hpanel { + border: none; + box-shadow: none; + margin-bottom: 25px; + +} + +.hpanel .panel-body { + border: 1px solid #e4e5e7; + border-radius: 2px; + padding: 20px; + position: relative; +} + +.h-200 { + min-height: 120px; +} + +.m-t-xl { + margin-top: 40px; +} +.card-name{ + text-align: center; +} +.m-t-xl div { + margin-bottom: 15px; +} + +.text-success { + color: #0d638f; +} + +.hpanel > .panel-footer { + color: inherit; + border: 1px solid #e4e5e7; + border-top: none; + font-size: 90%; + background: #f7f9fa; + height: 40px; + padding: 5px 15px; +} + +.color_cloud { + color: #ccc; +} + +.stats-title { + +} + +h3 { + margin-top: 10px; + margin-bottom: 40px; + font-weight: 200; +} + +.blue-font { + color: #428bca; +} + +.hpanel > .panel-footer .pull-right a { + margin-left: 5px; +} + +.hpanel > .panel-footer .pull-right .btn { + min-width: 30px !important; +} + +.font-bold { + font-weight: 600; + margin-bottom: 15px; +} +.hpanel_show { + background-color: #f7f9fa; +} +.vnfm-padding { + padding-left: 0; +} +.step-content{ + margin-top: 20px; +} +.px-ui-steps{ + height: 36px; +} +.px-ui-horizon-ul-horizon{ + display: flex; + box-orient: horizontal; + margin: 0; + padding: 0; +} +.px-ui-steps-li{ + list-style: none; + position: relative; + width: 386px; + height: 24px; + line-height: 24px; + float: left; + margin-right: 0; +} +.px-ui-menuitem-div-passive{ + position: absolute; + top: 50%; + left: 50%; + min-width: 120px; + -webkit-transform: translate(-50%,-50%); + -moz-transform: translate(-50%,-50%); + -ms-transform: translate(-50%,-50%); + -o-transform: translate(-50%,-50%); + transform: translate(-50%,-50%); +} +.step-active div:first-child span:last-child{ + color: #4d5761; +} +.step-active div:last-child, .step-active div:first-child span:first-child{ + background: #33bcff; +} +.px-ui-steps-number-passive{ + width: 24px; + height: 24px; + border-radius: 50%; + display: inline-block; + margin-right: 10px; + float: left; + color: #fff; + text-align: center; + background: #ddd; +} +.px-ui-steps-title-passive{ + white-space: nowrap; +} +.px-ui-steps-title-active{ + color: #4d5761; +} +.px-ui-steps-title-passive{ + color: #7c868d; +} + +.px-ui-underline-passive{ + width: 100%; + height: 2px; + margin-top: 35px; + position: absolute; + background: #ddd; +} +#btnPreStep, #btnSave{ + display: none; +}
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/ems/emsView.html b/portal/src/main/webapp/extsys/ems/emsView.html new file mode 100644 index 0000000..56a364e --- /dev/null +++ b/portal/src/main/webapp/extsys/ems/emsView.html @@ -0,0 +1,342 @@ +<!-- + + Copyright 2016-2017 ZTE Corporation. + + 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. + +--> +<!DOCTYPE html> +<html> +<head lang="en"> + <meta charset="UTF-8"> + <title></title> + <link href="../../thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet"/> + <link href="../../thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet"/> + <link href="../../thirdparty/uniform/css/uniform.default.min.css" rel="stylesheet"/> + <link href="../../thirdparty/css/ngict-component.css" rel="stylesheet"/> + <link href="css/animate.min.css" rel="stylesheet"/> + <link href="css/ems.css" rel="stylesheet"/> + <style> .ms-controller { visibility: hidden } </style> +</head> +<body> +<div ms-controller="emsController" class="container-fluid ms-controller"> + <div id="addEmsDlg" class="modal fade" tabindex="-1" role="dialog" + aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static"> + <div class="modal-dialog"> + <div class="modal-content Changepasswd"> + <div class="content"> + <div class="modal-header"> + <h4 id="myModalLabel">{{modalTitle}}</h4> + </div> + <div class="modal-body"> + <div class="px-ui-steps"> + <ul class="px-ui-horizon-ul-horizon" role="tablist"> + <li class="px-ui-steps-li step-active" id="step-resource"> + <div class="px-ui-menuitem-div-passive"> + <span class="px-ui-steps-number-passive">1</span> + <span class="px-ui-steps-title-passive">Resource</span> + </div> + <div class="px-ui-underline-passive"></div> + </li> + <li class="px-ui-steps-li" id="step-performance"> + <div class="px-ui-menuitem-div-passive"> + <span class="px-ui-steps-number-passive">2</span> + <span class="px-ui-steps-title-passive">Performance</span> + </div> + <div class="px-ui-underline-passive"></div> + </li> + <li class="px-ui-steps-li" id="step-alarm"> + <div class="px-ui-menuitem-div-passive"> + <span class="px-ui-steps-number-passive">3</span> + <span class="px-ui-steps-title-passive">Alarm</span> + </div> + <div class="px-ui-underline-passive"></div> + </li> + </ul> + </div> + <div class="step-content"> + <form class="form-horizontal" id="form_resource" role="form"> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>Name</span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="currentElement.emsName" name="emsName" class="form-control"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>Ftptype</span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <select ms-duplex="currentElement.resource.ftptype" name="ftptype" class="form-control"> + <option value="ftp">ftp</option> + <option value="sftp">sftp</option> + </select> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>IP</span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="currentElement.resource.ip" name="ip" class="form-control"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>Port</span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="currentElement.resource.port" name="port" class="form-control"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>User</span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="currentElement.resource.user" name="user" class="form-control" ms-attr-placeholder="urlTip"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>Password</span> + </label> + <div class="col-sm-7"> + <input type="password" class="form-control" rows="3" ms-duplex="currentElement.resource.password" name="password"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>Remotepath</span> + </label> + <div class="col-sm-7"> + <input class="form-control" rows="3" ms-duplex="currentElement.resource.remotepath" name="remotepath"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>Passive</span> + </label> + <div class="col-sm-7"> + <select class="form-control" rows="3" ms-duplex="currentElement.resource.passive" name="passive"> + <option value="true">true</option> + <option value="false">false</option> + </select> + <span class="help-block"></span> + </div> + </div> + </form> + <form class="form-horizontal" id="form_performance" role="form" hidden> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>Ftptype</span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <select ms-duplex="currentElement.performance.ftptype" name="type" class="form-control"> + <option value="ftp">ftp</option> + <option value="sftp">sftp</option> + </select> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>IP</span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="currentElement.performance.ip" name="ip" class="form-control"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>Port</span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="currentElement.performance.port" name="port" class="form-control"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>User</span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="currentElement.performance.user" name="user" class="form-control" ms-attr-placeholder="urlTip"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>Password</span> + </label> + <div class="col-sm-7"> + <input type="password" class="form-control" rows="3" ms-duplex="currentElement.performance.password" name="password"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>Remotepath</span> + </label> + <div class="col-sm-7"> + <input class="form-control" rows="3" ms-duplex="currentElement.performance.remotepath" name="remotepath"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>Passive</span> + </label> + <div class="col-sm-7"> + <select class="form-control" rows="3" ms-duplex="currentElement.performance.passive" name="passive"> + <option value="true">true</option> + <option value="false">false</option> + </select> + <span class="help-block"></span> + </div> + </div> + </form> + <form class="form-horizontal" id="form_alarm" role="form" hidden> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>IP</span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="currentElement.alarm.ip" name="ip" class="form-control"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>Port</span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="currentElement.alarm.port" name="port" class="form-control"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>User</span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="currentElement.alarm.user" name="user" class="form-control" ms-attr-placeholder="urlTip"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>Password</span> + </label> + <div class="col-sm-7"> + <input type="password" class="form-control" rows="3" ms-duplex="currentElement.alarm.password" name="password"/> + <span class="help-block"></span> + </div> + </div> + </form> + </div> + </div> + <div class="modal-footer"> + <button class="btn" id="btnPreStep" ms-click="$preStep">Back</button> + <button class="btn btn-primary" id="btnNextStep" ms-click="$nextStep">Next</button> + <button class="btn btn-primary" id="btnSave" ms-click="$saveEMS" id_i18n="nfv-ems-iui-text-saveBtn" name_i18n="com_zte_nfv_nsoc_i18n"></button> + <button class="btn" id="btnCancel" ms-click="dismiss" aria-hidden="true" id_i18n="nfv-ems-iui-text-cancelBtn" name_i18n="com_zte_nfv_nsoc_i18n"></button> + </div> + </div> + </div> + </div> + </div> + <div class="row-fluid" data-name="cond_zone"> + <div class="col-md-12"> + <button class="btn white radius_l" id="app-new-btn" ms-click="$registerEMS"> + <i class="ict-new"></i> <span id_i18n="nfv-ems-iui-text-registerBtn" name_i18n="com_zte_nfv_nsoc_i18n"></span> + </button> + </div> + </div> + + <div class="col-sm-12 vnfm-padding" ms-each-el="emsInfo"> + <div class="col-sm-3 animated-panel zoomIn"> + <div class="hpanel stats"> + <div class="panel-body h-200" ms-hover="hpanel_show"> + <div class="pull-left"> + <span class="label label-success" ms-if="el.status == status.success" id_i18n="nfv-ems-iui-text-status-normal" name_i18n="com_zte_nfv_nsoc_i18n"></span> + <span class="label label-danger" ms-if="el.status == status.failed" ms-attr-title="el.errorInfo" data-toggle="tooltip" id_i18n="nfv-ems-iui-text-status-fail" name_i18n="com_zte_nfv_nsoc_i18n"></span> + </div> + <div class="stats-icon pull-right"> + <i class="fa fa-server fa-5x color_cloud"></i> + </div> + <div class="m-t-xl"> + <h3 ms-text="el.emsName"></h3> + <!--<div class="card-name"><span ms-text="el.emsName"></span></div>--> + </div> + </div> + <div class="panel-footer"> + <div class="pull-right"> + <a class="btn btn-default btn-sm" ms-click="updateEMS($index)"><i + class="fa fa-pencil-square-o fa-lg"></i></a> + <a class="btn btn-default btn-sm" ms-click="delEMS(el.emsId, $index)"><i class="fa fa-trash-o fa-lg"></i></a> + </div> + </div> + </div> + </div> + </div> + <div class="col-sm-12"> + <div class="pull-left text-muted"> + <small><span id_i18n="nfv-ems-iui-text-total" name_i18n="com_zte_nfv_nsoc_i18n"></span> <span class="blue-font" ms-text="emsInfo.size()"></span> + <span id_i18n="nfv-ems-iui-text-total-ems" name_i18n="com_zte_nfv_nsoc_i18n"></span></small> + </div> + </div> +</div> +<script type="text/javascript" src="../../thirdparty/jquery/jquery-1.10.2.min.js"></script> +<script type="text/javascript" src="../../thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script> +<script type="text/javascript" src="../../thirdparty/bootstrap/js/bootstrap.min.js"></script> +<script type="text/javascript" src="../../thirdparty/bootbox/bootbox.min.js"></script> +<script type="text/javascript" src="../../thirdparty/jquery-validation/js/jquery.validate.min.js"></script> +<script type="text/javascript" src="../../thirdparty/jquery-validation/js/additional-methods.min.js"></script> + +<script type="text/javascript" src="../../thirdparty/bootstrap-growl/bootstrap-growl.min.js"></script> +<!--<script type="text/javascript" src="../../thirdparty/cometd/cometd.js"></script>--> +<!--<script type="text/javascript" src="../../thirdparty/cometd/jquery.cometd.js"></script>--> +<script type="text/javascript" src="../../thirdparty/avalon/avalon.js"></script> + +<script type="text/javascript" src="../../thirdparty/js/tools.js"></script> + +<script type="text/javascript" src="js/commonUtil.js"></script> +<script type="text/javascript" src="js/loadi18n_nsoc.js"></script> + +<script type="text/javascript" src="js/ems-validate.js"></script> +<script type="text/javascript" src="js/emsController.js"></script> +</body> +</html>
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/ems/i18n/nfv-nso-iui-i18n-en-US.properties b/portal/src/main/webapp/extsys/ems/i18n/nfv-nso-iui-i18n-en-US.properties new file mode 100644 index 0000000..f39749a --- /dev/null +++ b/portal/src/main/webapp/extsys/ems/i18n/nfv-nso-iui-i18n-en-US.properties @@ -0,0 +1,55 @@ +# +# Copyright 2016-2017 ZTE Corporation. +# +# 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. +# + +//ems +nfv-ems-iui-title=EMS Manage +nfv-ems-iui-message-title=Ems info +nfv-ems-iui-message-query-fail=Query ems failed. +nfv-ems-iui-message-save-success=Save successfully. +nfv-ems-iui-message-save-fail=Save failed. +nfv-ems-iui-message-ems-already-exists=Ems already exists. +nfv-ems-iui-message-update-success=Update successfully. +nfv-ems-iui-message-update-fail=Update failed. +nfv-ems-iui-message-delete-confirm=Do you want to delete the current ems? +nfv-ems-iui-message-delete-success=Ems deleted successfully. +nfv-ems-iui-message-delete-fail=Ems deleted failed. + +nfv-ems-iui-text-update=Modify ems info +nfv-ems-iui-text-register=Register ems info +nfv-ems-iui-text-name=Name +nfv-ems-iui-text-type=type +nfv-ems-iui-text-version=version +nfv-ems-iui-text-certificateUrl=certificate URL +nfv-ems-iui-text-vendor=Vendor +nfv-ems-iui-text-userName=Username +nfv-ems-iui-text-password=Password +nfv-ems-iui-text_description=Description +nfv-ems-iui-text-cancelBtn=cancel +nfv-ems-iui-text-saveBtn=save +nfv-ems-iui-text-registerBtn=Register +nfv-ems-iui-text-status-normal=Normal +nfv-ems-iui-text-status-fail=Abnormal +nfv-ems-iui-text-total=Total +nfv-ems-iui-text-total-ems= of ems + +nfv-ems-iui-validate-name=Please enter a name +nfv-ems-iui-validate-type=Please enter the ems type +nfv-ems-iui-validate-version=Please enter version +nfv-ems-iui-validate-vendor=Please enter vendor +nfv-ems-iui-validate-ems=Please select a EMS +nfv-ems-iui-validate-url-required=Please enter the URL +nfv-ems-iui-validate-url=Please enter the right URL +nfv-ems-iui-text-url-tip=Example: http://10.0.0.1 diff --git a/portal/src/main/webapp/extsys/ems/i18n/nfv-nso-iui-i18n-zh-CN.properties b/portal/src/main/webapp/extsys/ems/i18n/nfv-nso-iui-i18n-zh-CN.properties new file mode 100644 index 0000000..e6bdacd --- /dev/null +++ b/portal/src/main/webapp/extsys/ems/i18n/nfv-nso-iui-i18n-zh-CN.properties @@ -0,0 +1,54 @@ +# +# Copyright 2016-2017 ZTE Corporation. +# +# 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. +# + +//ems +nfv-ems-iui-title=EMS管理 +nfv-ems-iui-message-title=EMS信息 +nfv-ems-iui-message-query-fail=查询EMS失败。 +nfv-ems-iui-message-save-success=保存成功。 +nfv-ems-iui-message-save-fail=保存失败。 +nfv-ems-iui-message-ems-already-exists=EMS已经存在 +nfv-ems-iui-message-update-success=修改成功。 +nfv-ems-iui-message-update-fail=修改失败。 +nfv-ems-iui-message-delete-confirm=确定删除所选ems信息？ +nfv-ems-iui-message-delete-success=删除成功 +nfv-ems-iui-message-delete-fail=删除失败 +nfv-ems-iui-text-update=修改EMS信息 +nfv-ems-iui-text-register=注册EMS信息 +nfv-ems-iui-text-name=名称 +nfv-ems-iui-text-type=类型 +nfv-ems-iui-text-version=版本 +nfv-ems-iui-text-certificateUrl=认证url +nfv-ems-iui-text_description=描述 +nfv-ems-iui-text-vendor=厂商 +nfv-ems-iui-text-userName=接入用户 +nfv-ems-iui-text-password=接入密码 +nfv-ems-iui-text-cancelBtn=取消 +nfv-ems-iui-text-saveBtn=保存 +nfv-ems-iui-text-registerBtn=注册EMS +nfv-ems-iui-text-status-normal=正常 +nfv-ems-iui-text-status-fail=报警 +nfv-ems-iui-text-total=共 +nfv-ems-iui-text-total-ems=EMS + +nfv-ems-iui-validate-name=请输入名称 +nfv-ems-iui-validate-type=请输入EMS类型 +nfv-ems-iui-validate-version=请输入版本号 +nfv-ems-iui-validate-vendor=请输入厂商 +nfv-ems-iui-validate-vim=请选择EMS +nfv-ems-iui-validate-url-required=请输入URL +nfv-ems-iui-validate-url=请输入正确的URL +nfv-ems-iui-text-url-tip=例如：http://10.0.0.1
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/ems/js/commonUtil.js b/portal/src/main/webapp/extsys/ems/js/commonUtil.js new file mode 100644 index 0000000..44a72f3 --- /dev/null +++ b/portal/src/main/webapp/extsys/ems/js/commonUtil.js @@ -0,0 +1,128 @@ +/* + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ +var commonUtil = {}; +commonUtil.arrayRemove = function (aryInstance, index) { + if (aryInstance == undefined || aryInstance == null) { + return; + } + for (var i = 0, n = 0; i < aryInstance.length; i++) { + if (aryInstance[i] != aryInstance[dx]) { + aryInstance[n++] = aryInstance[i]; + } + } + aryInstance.length -= 1; +}; + +//For the expansion of the Date, convert the Date to specify the format String +// examples： +// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 +// (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18 +commonUtil.parseDate = function (dateObj, format) { + var o = { + "M+": dateObj.getMonth() + 1, //month + "d+": dateObj.getDate(), //day + "h+": dateObj.getHours(), //hour + "m+": dateObj.getMinutes(), //minute + "s+": dateObj.getSeconds(), //second + "q+": Math.floor((dateObj.getMonth() + 3) / 3), //quarter + "S": dateObj.getMilliseconds() //millisecond + } + if (/(y+)/.test(format)) format = format.replace(RegExp.$1, + (dateObj.getFullYear() + "").substr(4 - RegExp.$1.length)); + for (var k in o) + if (new RegExp("(" + k + ")").test(format)) + format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : + ("00" + o[k]).substr(("" + o[k]).length)); + return format; +}; + +//tooltip +commonUtil.showMessage = function (message, type) { + $.growl({ + icon: "fa fa-envelope-o fa-lg", + title: " " + $.i18n.prop("nfv-nso-iui-common-tip"), + message: message + }, { + type: type + }); +}; + +commonUtil.registerCometdMessage = function (url, channel, callback) { + var cometd = new $.Cometd(); + var cometdURL = location.protocol + "//" + location.host + url; + cometd.configure({ + url: cometdURL, + logLevel: "info" + }); + // unregister websocket transport, use long-polling transport + cometd.unregisterTransport('websocket'); + // store channel object parameters(this object include channel and callback function), start from arguments[1] + var _args = arguments; + + cometd.addListener("/meta/handshake", function (handshake) { + if (handshake.successful === true) { + cometd.batch(function () { + //subscribe channel + cometd.subscribe(channel, function (message) { + callback.call(this, message.data); + }); + }); + } + }); + cometd.handshake(); +} + +commonUtil.format = function () { + if (arguments.length == 0) { + return null; + } + var str = arguments[0]; + for (var i = 0; i < arguments.length; i++) { + var reg = new RegExp("\\{" + (i - 1) + "\\}", "gm"); + str = str.replace(reg, arguments[i]); + } + return str; +} + +commonUtil.get = function (url, params, callback) { + $.ajax({ + type: "GET", + url: url, + //contentType : contentType || "application/x-www-form-urlencoded; charset=UTF-8", + dataType: "json", + data: params || {}, + success: callback + }); +} + +commonUtil.post = function (url, params, callback, contentType) { + $.ajax({ + type: "POST", + url: url, + contentType: contentType || "application/x-www-form-urlencoded; charset=UTF-8", + data: params || {}, + success: callback + }); +} + +commonUtil.delete = function (url, callback, contentType) { + $.ajax({ + type: "DELETE", + url: url, + contentType: contentType || "application/x-www-form-urlencoded; charset=UTF-8", + success: callback + }); +}
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/ems/js/ems-validate.js b/portal/src/main/webapp/extsys/ems/js/ems-validate.js new file mode 100644 index 0000000..7cca638 --- /dev/null +++ b/portal/src/main/webapp/extsys/ems/js/ems-validate.js @@ -0,0 +1,89 @@ +/* + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ +$(function () { + var form = $('#vnfm_form'); + var error = $('.alert-danger', form); + var success = $('.alert-success', form); + + form.validate({ + doNotHideMessage: true, //this option enables to show the error/success messages on tab switch. + errorElement: 'span', //default input error message container + errorClass: 'help-block', // default input error message class + focusInvalid: false, // do not focus the last invalid input + rules: { + name: { + required: true, + maxlength: 20 + }, + type: { + required: true, + maxlength: 20 + }, + version: { + required: true, + maxlength: 20 + }, + vendor: { + required: true, + maxlength: 20 + }, + url: { + required: true, + url: true + } + }, + messages: { + name: { + required: $.i18n.prop("nfv-ems-iui-validate-name") + }, + type: { + required: $.i18n.prop("nfv-ems-iui-validate-type") + }, + version: { + required: $.i18n.prop("nfv-ems-iui-validate-version") + }, + vendor: { + required: $.i18n.prop("nfv-ems-iui-validate-vendor") + }, + url: { + required: $.i18n.prop("nfv-ems-iui-validate-url-required"), + url: $.i18n.prop("nfv-ems-iui-validate-url") + } + }, + errorPlacement: function (error, element) { // render error placement for each input type + error.insertAfter(element); // for other inputs, just perform default behavior + }, + invalidHandler: function (event, validator) { //display error alert on form submit + success.hide(); + error.show(); + }, + highlight: function (element) { // hightlight error inputs + $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group + }, + unhighlight: function (element) { // revert the change done by hightlight + $(element).closest('.form-group').removeClass('has-error'); // set error class to the control group + }, + success: function (label) { + label.addClass('valid') // mark the current input as valid and display OK icon + .closest('.form-group').removeClass('has-error'); // set success class to the control group + }, + submitHandler: function (form) { + success.show(); + error.hide(); + //add here some ajax code to submit your form or just call form.submit() if you want to submit the form without ajax + } + }); +});
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/ems/js/emsController.js b/portal/src/main/webapp/extsys/ems/js/emsController.js new file mode 100644 index 0000000..b615b62 --- /dev/null +++ b/portal/src/main/webapp/extsys/ems/js/emsController.js @@ -0,0 +1,329 @@ +/* + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ + +var vm = avalon.define({ + $id: "emsController", + emsInfo: [], + currentElement: {}, + $emsList: [], + $newElement: { + "emsId": "", + "status": "active", + "emsName": "", + "version": "v1.0", + "vendor": "ZTE", + "description": "ems description", + "resource": { + "ftptype": "ftp", + "ip": "", + "port": "", + "user": "root", + "password": "", + "remotepath": "/opt/Gcp/data/", + "passive": true + }, + "performance": { + "ftptype": "ftp", + "ip": "", + "port": "", + "user": "root", + "password": "", + "remotepath": "", + "passive": true + }, + "alarm": { + "ip": "", + "port": 2000, + "user": "root", + "password": "" + } + }, + vimSelectItems: [], + saveType: "add", + server_rtn: { + info_block: false, + warning_block: false, + rtn_info: "", + $RTN_SUCCESS: "RTN_SUCCESS", + $RTN_FAILED: "RTN_FAILED" + }, + modalTitle: $.i18n.prop("nfv-ems-iui-text-register"), + urlTip: "", + currentStep: 1, + status: { + success: "active", + failed: "inactive" + }, + $format: { + "ipv4": /^((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))))$/, + "port": /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/, + "url": /^(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?$/ + }, + $restUrl: { + queryEmsInfoUrl: "/esrui/extsys/ems/mock-data/ems.json",//'/onapapi/aai/esr/v1/ems', + addVnfmInfoUrl: '/onapapi/aai/esr/v1/ems', + updateVnfmInfoUrl: '/onapapi/aai/esr/v1/ems/', + delVnfmInfoUrl: '/onapapi/aai/esr/v1/ems/', + queryMocUrl: '', + queryVimUrl: '/onapapi/aai/esr/v1/vims' + }, + $htmlText: { + saveSuccess: $.i18n.prop("nfv-ems-iui-message-save-success"), + saveFail: $.i18n.prop("nfv-ems-iui-message-save-fail"), + alreadyExist: $.i18n.prop("nfv-ems-iui-message-ems-already-exists"), + updateSuccess: $.i18n.prop("nfv-ems-iui-message-update-success"), + updateFail: $.i18n.prop("nfv-ems-iui-message-update-fail") + }, + $initTable: function () { + $.ajax({ + "type": 'GET', + "url": vm.$restUrl.queryEmsInfoUrl, + "dataType": "json", + "success": function (resp) { + vm.emsInfo = resp; + vm.$emsList = $.extend(true, [], resp) ; + }, + error: function (XMLHttpRequest, textStatus, errorThrown) { + bootbox.alert($.i18n.prop("nfv-ems-iui-message-query-fail") + "：" + textStatus + ":" + errorThrown); + return; + }, + complete: function () { + $("[data-toggle='tooltip']").tooltip(); + } + }); + }, + $nextStep: function () { + if(vm.currentStep == 1 && !vm.validate("resource")){ + return false; + } else if(vm.currentStep == 2 && !vm.validate("performance")){ + return false; + } + vm.currentStep ++; + vm.showStep(); + }, + $preStep: function () { + if(vm.currentStep == 2 && !vm.validate("resource")){ + return false; + } else if(vm.currentStep == 3 && !vm.validate("alarm")){ + return false; + } + vm.currentStep --; + vm.showStep(); + }, + showStep: function () { + var show = function (filter) { + $(".px-ui-steps ul li.step-active").removeClass("step-active"); + $("#step-" + filter).addClass("step-active"); + $(".step-content form").hide(); + $("#form_" + filter).show(); + }; + switch (vm.currentStep){ + case 1: + show("resource"); + $("#btnSave, #btnPreStep").hide(); + $("#btnNextStep").show(); + break; + case 2: + show("performance"); + $("#btnSave").hide(); + $("#btnNextStep, #btnPreStep").show(); + break; + case 3: + show("alarm"); + $("#btnNextStep").hide(); + $("#btnSave, #btnPreStep").show(); + break; + } + }, + $registerEMS: function () { + vm.currentElement = $.extend(true, {}, vm.$newElement); + vm.currentIndex = -1; + vm.saveType = "add"; + vm.modalTitle = $.i18n.prop("nfv-ems-iui-text-register"); + vm.$showTable(); + }, + $showTable: function () { + vm.currentStep = 1; + vm.showStep(); + $(".form-group").removeClass('has-success').removeClass('has-error'); + $("#addEmsDlg").modal("show"); + }, + dismiss: function () { + if(vm.currentIndex !== -1){ + vm.currentElement.emsName = vm.$emsList[vm.currentIndex].emsName; + } + $("#addEmsDlg").modal("hide"); + }, + $saveEMS: function () { + var form = $('#vnfm_form'); + //TODO valiate + vm.server_rtn.info_block = true; + vm.server_rtn.warning_block = false; + + //save VIM info + var res = false; + if (vm.saveType == "add") { + res = vm.postEMS(); + } else { + res = vm.putEMS(); + } + if(res){ + $("#addEmsDlg").modal("hide"); + } + }, + updateEMS: function (index) { + vm.saveType = "update"; + vm.currentIndex = index; + vm.currentElement = vm.emsInfo[index]; + vm.$showTable(); + }, + delEMS: function (id, index) { + bootbox.confirm($.i18n.prop("nfv-ems-iui-message-delete-confirm"), function (result) { + if (result) { + vm.emsInfo.splice(index, 1); + vm.$emsList.splice(index, 1); + console.log(vm.emsInfo[index]); + /* $.ajax({ + type: "DELETE", + url: vm.$restUrl.delVnfmInfoUrl + id, + dataType: "json", + success: function (data, statusText, jqXHR) { + if (jqXHR.status == "204") { + + commonUtil.showMessage($.i18n.prop("nfv-ems-iui-message-delete-success"), "success"); + } else { + commonUtil.showMessage($.i18n.prop("nfv-ems-iui-message-delete-fail"), "warning"); + } + }, + error: function () { + commonUtil.showMessage($.i18n.prop("nfv-ems-iui-message-delete-fail"), "warning"); + } + });*/ + } + }); + }, + validate: function (formId) { + var res = true; + var emsSave = vm.getEMSSave(); + var ip = emsSave[formId].ip; + var port = emsSave[formId].port; + if(!vm.$format.ipv4.test(ip)){ + $("#form_" + formId + " input[name='ip']").next().html("The IP format is incorrect"); + res = res && false; + } else { + $("#form_" + formId + " input[name='ip']").next().html(""); + } + if(!vm.$format.port.test(port)){ + $("#form_" + formId + " input[name='port']").next().html("The port format is incorrect"); + res = res && false; + } else { + $("#form_" + formId + " input[name='port']").next().html(""); + } + return res; + }, + postEMS: function () { + var emsSave = vm.getEMSSave(); + if(!vm.validate("alarm")){ + return false; + } + emsSave.emsId = Math.floor(Math.random() * 100000) / 100000; + vm.emsInfo.push(emsSave); + vm.$emsList.push(emsSave); + console.log(emsSave); + return true; + /*$.ajax({ + type: "POST", + url: vm.$restUrl.addVnfmInfoUrl, + data: JSON.stringify(vm.currentElement), + dataType: "json", + contentType: "application/json", + success: function (data) { + vm.server_rtn.info_block = false; + vm.server_rtn.warning_block = false; + if (data) { + vm.vnfmInfo = []; + vm.$initTable(); + + $('#addEmsDlg').modal('hide'); + commonUtil.showMessage(vm.$htmlText.saveSuccess, "success"); + } else { + vm.server_rtn.warning_block = true; + vm.server_rtn.rtn_info = vm.$htmlText.saveFail; + commonUtil.showMessage(vm.$htmlText.saveFail, "failed"); + } + }, + error: function (XMLHttpRequest, textStatus, errorThrown) { + vm.server_rtn.warning_block = true; + vm.server_rtn.rtn_info = textStatus + ":" + errorThrown; + vm.server_rtn.info_block = false; + } + });*/ + }, + putEMS: function () { + console.log(vm.getEMSSave()); + if(!vm.validate("alarm")){ + return false; + } + return true; + /* $.ajax({ + type: "PUT", + url: vm.$restUrl.updateVnfmInfoUrl + vm.currentElement.emsId, + data: JSON.stringify(vm.currentElement), + dataType: "json", + contentType: "application/json", + success: function (data) { + vm.server_rtn.info_block = false; + vm.server_rtn.warning_block = false; + if (data) { + for (var i = 0; i < vm.vnfmInfo.length; i++) { + if (vm.vnfmInfo[i].vnfmId == vm.addVnfm.vnfmId) { + vm.vnfmInfo[i].name = vm.addVnfm.name; + vm.vnfmInfo[i].vimId = $("#vimId").val(); + vm.vnfmInfo[i].vendor = vm.addVnfm.vendor; + vm.vnfmInfo[i].version = vm.addVnfm.version; + vm.vnfmInfo[i].certificateUrl = vm.addVnfm.certificateUrl; + vm.vnfmInfo[i].description = vm.addVnfm.description; + vm.vnfmInfo[i].url = vm.addVnfm.url; + vm.vnfmInfo[i].userName = vm.addVnfm.userName; + vm.vnfmInfo[i].password = vm.addVnfm.password; + } + } + $('#addEmsDlg').modal('hide'); + commonUtil.showMessage(vm.$htmlText.updateSuccess, "success"); + } else { + vm.server_rtn.warning_block = true; + vm.server_rtn.rtn_info = vm.$htmlText.updateFail; + commonUtil.showMessage(vm.$htmlText.updateFail, "failed"); + } + }, + error: function (XMLHttpRequest, textStatus, errorThrown) { + vm.server_rtn.warning_block = true; + vm.server_rtn.rtn_info = textStatus + ":" + errorThrown; + vm.server_rtn.info_block = false; + } + });*/ + }, + getEMSSave: function () { + var emsSave = $.extend(true, {}, vm.currentElement.$model); + emsSave.alarm = vm.currentElement.alarm.$model; + emsSave.resource = vm.currentElement.resource.$model; + emsSave.performance = vm.currentElement.performance.$model; + return emsSave; + } + }); +vm.currentElement = $.extend(true, {}, vm.$newElement); +avalon.scan(); +vm.$initTable();
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/ems/js/loadi18n_nsoc.js b/portal/src/main/webapp/extsys/ems/js/loadi18n_nsoc.js new file mode 100644 index 0000000..45224af --- /dev/null +++ b/portal/src/main/webapp/extsys/ems/js/loadi18n_nsoc.js @@ -0,0 +1,38 @@ +/* + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ +function loadPropertiesSideMenu(lang, fileNamePrefix, filePath) { + jQuery.i18n.properties({ + language: lang, + name: fileNamePrefix, + path: filePath, + mode: 'map', + callback: function () { + var i18nItems = $("[name_i18n=com_zte_nfv_nsoc_i18n]"); + for (var i = 0; i < i18nItems.length; i++) { + var $item = $(i18nItems.eq(i)); + var itemId = $item.attr("id_i18n"); + var itemTitle = $item.attr("title"); + if (typeof(itemTitle) != "undefined") { + $item.attr("title", $.i18n.prop(itemId)); + } else { + $item.text($.i18n.prop(itemId)); + } + } + } + }); +} +var lang = getLanguage(); +loadPropertiesSideMenu(lang, 'nfv-nso-iui-i18n', 'i18n/');
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/ems/mock-data/ems.json b/portal/src/main/webapp/extsys/ems/mock-data/ems.json new file mode 100644 index 0000000..d02e57e --- /dev/null +++ b/portal/src/main/webapp/extsys/ems/mock-data/ems.json @@ -0,0 +1,66 @@ +[
+ {
+ "emsId": "123098765",
+ "status": "active",
+ "emsName": "EMS_TEST",
+ "version": "v1.0",
+ "vendor": "ZTE",
+ "description": "ems description",
+ "resource": {
+ "ftptype": "ftp",
+ "ip": "10.44.55.145",
+ "port": "2000",
+ "user": "root",
+ "password": "test",
+ "remotepath": "/opt/Gcp/data/",
+ "passive": true
+ },
+ "performance": {
+ "ftptype": "ftp",
+ "ip": "10.44.55.145",
+ "port": "2000",
+ "user": "root",
+ "password": "test",
+ "remotepath": "/opt/Gcp/data/",
+ "passive": true
+ },
+ "alarm": {
+ "ip": "10.44.55.145",
+ "port": 2000,
+ "user": "root",
+ "password": "test"
+ }
+ },
+ {
+ "emsId": "12309876566",
+ "status": "inactive",
+ "emsName": "EMS_TEST_FAILED",
+ "version": "v1.0",
+ "vendor": "ZTE",
+ "description": "ems description",
+ "resouce": {
+ "ftptype": "sftp",
+ "ip": "10.44.55.15",
+ "port": "2100",
+ "user": "root",
+ "password": "test",
+ "remotepath": "/opt/Gcp/data/",
+ "passive": true
+ },
+ "performance": {
+ "ftptype": "sftp",
+ "ip": "10.44.55.15",
+ "port": "2100",
+ "user": "root",
+ "password": "test",
+ "remotepath": "/opt/Gcp/data/",
+ "passive": true
+ },
+ "alarm": {
+ "ip": "10.44.55.15",
+ "port": 2100,
+ "user": "root",
+ "password": "test"
+ }
+ }
+]
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/sdncontroller/css/animate.min.css b/portal/src/main/webapp/extsys/sdncontroller/css/animate.min.css new file mode 100644 index 0000000..3b04801 --- /dev/null +++ b/portal/src/main/webapp/extsys/sdncontroller/css/animate.min.css @@ -0,0 +1,21 @@ +/** + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ +@charset "UTF-8";/*! +Animate.css - http://daneden.me/animate +Licensed under the MIT license - http://opensource.org/licenses/MIT + +Copyright (c) 2014 Daniel Eden +*/.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}@-webkit-keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);-ms-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);-ms-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);-ms-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);-ms-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);-ms-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);-ms-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);-ms-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);-ms-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}@keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);-ms-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);-ms-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);-ms-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);-ms-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);-ms-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}.swing{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes tada{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);-ms-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);-ms-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);-ms-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;transform:none}}@keyframes wobble{0%{-webkit-transform:none;-ms-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);-ms-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);-ms-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);-ms-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);-ms-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);-ms-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);-ms-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);-ms-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);-ms-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);-ms-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);-ms-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);-ms-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);-ms-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);-ms-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);-ms-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);-ms-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);-ms-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);-ms-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);-ms-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);-ms-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);-ms-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);-ms-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);-ms-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);-ms-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);-ms-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);-ms-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);-ms-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);-ms-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-ms-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-ms-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);-ms-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;-ms-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);-ms-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);-ms-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);-ms-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);-ms-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;transform:none;opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);-ms-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);-ms-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);-ms-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);-ms-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);-ms-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);-ms-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);-ms-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0,0,1,45deg);transform:rotate(0,0,1,45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0,0,1,45deg);-ms-transform:rotate(0,0,1,45deg);transform:rotate(0,0,1,45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);-ms-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);-ms-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);-ms-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);-ms-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);-ms-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}@keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);-ms-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-ms-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-ms-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);-ms-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);-ms-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/sdncontroller/css/sdnc.css b/portal/src/main/webapp/extsys/sdncontroller/css/sdnc.css new file mode 100644 index 0000000..0998451 --- /dev/null +++ b/portal/src/main/webapp/extsys/sdncontroller/css/sdnc.css @@ -0,0 +1,550 @@ +/** + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ +body { + font-family: microsoft yahei !important; +} + +/* blue pill (inspired by iTunes) +*******************************************************************************/ + +.grey { + background-color: #e5e5e5; + color: #333; +} + +.blue { + + background-color: #5b9bd1; + border-radius: 20px; + color: #fff; + font-weight: bold; + padding: 8px 0; + text-align: center; + width: 100px; +} + +.blue:hover { + background-color: #e8f3fd; + color: #5b9bd1; +} + +.blue.selected { + border: 0; + background-color: #5b9bd1; + color: #fff; +} + +.blue.selected:hover { + border: 0; + background-color: #5b9bd1; + color: #fff; +} + +p { + color: #444; + font-size: 14px; + font-weight: normal; + line-height: 21px; + margin: 0 0 12px 0; +} + +p.credit { + border-top: 1px solid #ccc; + font-size: 14px; + line-height: 140%; + margin: 36px 0 12px 0; + padding: 8px 0 0 0; + text-align: center; +} + +ul.column { + float: left; + list-style: none; + width: 675px; +} + +ul.column li { + background: #eee; + -webkit-border-radius: 5px; + border-radius: 5px; + -webkit-box-shadow: inset 0 1px 1px 0 #c7c7c7; + box-shadow: inset 0 1px 1px 0 #c7c7c7; + float: left; + margin: 10px 0 0 10px; + display: block; + height: 150px; + text-align: center; + width: 215px; +} + +/* Clear Floated Elements +------------------------------------------------------------------------------*/ +.column:after, .button-collection:after, .clearfix:after, div.project-info:after { + clear: both; + content: ' '; + display: block; + font-size: 0; + line-height: 0; + visibility: hidden; + width: 0; + height: 0; +} + +.container-fluid { + background-color: white !important; + min-height: 500px; +} + +.nav-tabs { + border: 0; +} + +.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { + border: 0; + border-top: 3px solid #F3565D; +} + +.nav-tabs > li > a { + border-radius: 0; +} + +.nav-tabs > li > a:hover { + background-color: #f1f3fa; + border: 1Px solid #f1f3fa; +} + +.c3 { + margin-top: 120px; +} + +.skills-chart-breadcrumb { + +} + +.blue:selected { + border: 0; + background-color: #5b9bd1; +} + +.btn { + /* border-width: 0; */ + /* padding: 7px 14px; */ + /* font-size: 14px; */ + /* outline: none !important; */ + /* background-image: none !important; */ + /* filter: none; */ + /* -webkit-box-shadow: none; */ + -moz-box-shadow: none; + /* box-shadow: none; */ + /* text-shadow: none; */ +} + +select { + border-width: 1px; + padding: 4px 1px; + border-radius: 4px; +} + +.input-sm { + padding: 4px 10px; +} + +.btn-block { + display: block; + width: 100%; + padding-left: 0; + padding-right: 0; +} + +/* Bootstrap buttons */ + +.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active { + color: #333; + background-color: #ededed; + border-color: #b3b3b3; +} + +.open .btn-default.dropdown-toggle { + color: #333; + background-color: #ededed; + border-color: #b3b3b3; +} + +.btn-default:active, .btn-default.active { + background-image: none; + background-color: #e0e0e0; + font-weight: bold; +} + +.btn-default:active:hover, .btn-default.active:hover { + background-color: #e6e6e6; +} + +.open .btn-default.dropdown-toggle { + background-image: none; +} + +.btn-default.disabled, .btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled:active, .btn-default.disabled.active, .btn-default[disabled], .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled]:active, .btn-default[disabled].active, fieldset[disabled] .btn-default, fieldset[disabled] .btn-default:hover, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default.active { + background-color: #fff; + border-color: #ccc; +} + +.btn-default .badge { + color: #fff; + background-color: #333; +} + +.btn-default > i[class^="icon-"], .btn-default > i[class*="icon-"] { + color: #8c8c8c; +} + +div[data-name="tab_zone"] div { + background-color: #f1f3fa; + padding: 0px; +} + +div[data-name="cond_zone"] div { + background-color: #fff; + margin-top: 15px; + margin-bottom: 15px; +} + +div[data-name="res-conds-zone"] { + display: inline; +} + +div[data-name="res-conds-zone"] select, div[data-name="res-conds-zone"] span { + /**height:33px;*/ + margin-left: 15px; + color: #5b9bd1; + border-color: #ccc; + font-weight: bold; +} + +.input { + width: 250px; + height: 34px; + padding: 6px 12px; + font-size: 14px; + line-height: 1.42857143; + color: #555; + background-color: #fff; + background-image: none; + border: 1px solid #ccc; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); + -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; +} + +div.separator { + margin: 20px; +} + +div.separator div { + text-align: center; + line-height: 0; +} + +div.separator-line { + height: 1px !important; + width: 100%; + background: #ddd; + overflow: hidden; +} + +.dropdown-toggle { + color: #5b9bd1; +} + +.calendar-date { + color: #5b9bd1; +} + +.range_inputs { + color: #5b9bd1; +} + +.btn.dropdown-toggle, .btn-group .btn.dropdown-toggle, .btn:hover, .btn:disabled, .btn[disabled], .btn:focus, .btn:active, .btn.active { + outline: none !important; + background-image: none !important; + filter: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + text-shadow: none; +} + +#skills-chart-breadcrumb { + margin-bottom: 10px +} + +/*增加daterangepicker的css*/ +input[name="daterange"] { + width: 220px; + line-height: 0; + height: 31px; + vertical-align: top; + margin-top: 2px; +} + +.daterangepicker .ranges { + width: 205px; +} + +.daterangepicker .ranges input { + width: 95px !important; +} + +td.details-control { + cursor: pointer; +} + +tr.shown td.details-control { +} + +.details table td { + word-wrap: break-word; + word-break: normal; + border-top: 1px solid #dddddd; +} + +.details table tr:first-child td { + border-top: none; +} + +.details table { + table-layout: fixed; + width: 100%; +} + +td.title { + width: 10%; +} + +table.dataTable tbody th, table.dataTable tbody td { + padding: 8px 10px; +} + +div.dataTables_length, div.dataTables_info { + display: inline; +} + +div.dataTables_paginate { + display: inline; + float: right; +} + +div.pagination-panel { + margin-right: 10px; +} + +input.pagination-panel-input { + width: 50px; +} + +#ict_res_table_div { + margin-top: 15px; +} + +#ict_res_table_div label { + font-weight: 100; +} + +.daterangepicker .daterangepicker_start_input label, .daterangepicker .daterangepicker_end_input label { + color: #5b9bd1; +} + +.daterangepicker .ranges .input-mini { + color: #5b9bd1; +} + +.cancelBtn { + padding: 5px 10px 5px 10px; +} + +.btn:focus, .btn:active:focus, .btn.active:focus { + outline: 0; +} + +#ict_res_table_div table { + width: 100% !important; +} + +.control-label .required { + color: #e02222; + font-size: 12px; + padding-left: 2px; +} + +#ict_vim_table tbody tr { + cursor: pointer; +} + +/*卡片面板样式*/ +.animated-panel { + -webkit-animation-duration: .5s; + animation-duration: .5s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-delay: 0.1s; +} + +.hpanel { + border: none; + box-shadow: none; + margin-bottom: 25px; + +} + +.hpanel .panel-body { + border: 1px solid #e4e5e7; + border-radius: 2px; + padding: 20px; + position: relative; +} + +.h-200 { + min-height: 120px; +} + +.m-t-xl { + margin-top: 40px; +} +.card-name{ + text-align: center; +} +.m-t-xl div { + margin-bottom: 15px; +} + +.text-success { + color: #0d638f; +} + +.hpanel > .panel-footer { + color: inherit; + border: 1px solid #e4e5e7; + border-top: none; + font-size: 90%; + background: #f7f9fa; + height: 40px; + padding: 5px 15px; +} + +.color_cloud { + color: #ccc; +} + +.stats-title { + +} + +h3 { + margin-top: 10px; + margin-bottom: 40px; + font-weight: 200; +} + +.blue-font { + color: #428bca; +} + +.hpanel > .panel-footer .pull-right a { + margin-left: 5px; +} + +.hpanel > .panel-footer .pull-right .btn { + min-width: 30px !important; +} + +.font-bold { + font-weight: 600; + margin-bottom: 15px; +} +.hpanel_show { + background-color: #f7f9fa; +} +.vnfm-padding { + padding-left: 0; +} +.step-content{ + margin-top: 20px; +} +.px-ui-steps{ + height: 36px; +} +.px-ui-horizon-ul-horizon{ + display: flex; + box-orient: horizontal; + margin: 0; + padding: 0; +} +.px-ui-steps-li{ + list-style: none; + position: relative; + width: 386px; + height: 24px; + line-height: 24px; + float: left; + margin-right: 0; +} +.px-ui-menuitem-div-passive{ + position: absolute; + top: 50%; + left: 50%; + min-width: 120px; + -webkit-transform: translate(-50%,-50%); + -moz-transform: translate(-50%,-50%); + -ms-transform: translate(-50%,-50%); + -o-transform: translate(-50%,-50%); + transform: translate(-50%,-50%); +} +.step-active div:first-child span:last-child{ + color: #4d5761; +} +.step-active div:last-child, .step-active div:first-child span:first-child{ + background: #33bcff; +} +.px-ui-steps-number-passive{ + width: 24px; + height: 24px; + border-radius: 50%; + display: inline-block; + margin-right: 10px; + float: left; + color: #fff; + text-align: center; + background: #ddd; +} +.px-ui-steps-title-passive{ + white-space: nowrap; +} +.px-ui-steps-title-active{ + color: #4d5761; +} +.px-ui-steps-title-passive{ + color: #7c868d; +} + +.px-ui-underline-passive{ + width: 100%; + height: 2px; + margin-top: 35px; + position: absolute; + background: #ddd; +}
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/sdncontroller/i18n/nfv-nso-iui-i18n-en-US.properties b/portal/src/main/webapp/extsys/sdncontroller/i18n/nfv-nso-iui-i18n-en-US.properties new file mode 100644 index 0000000..caaa70e --- /dev/null +++ b/portal/src/main/webapp/extsys/sdncontroller/i18n/nfv-nso-iui-i18n-en-US.properties @@ -0,0 +1,55 @@ +# +# Copyright 2016-2017 ZTE Corporation. +# +# 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. +# + +//sdnc +nfv-sdnc-iui-title=SDNC Manage +nfv-sdnc-iui-message-title=SDNC info +nfv-sdnc-iui-message-query-fail=Query sdnc failed. +nfv-sdnc-iui-message-save-success=Save successfully. +nfv-sdnc-iui-message-save-fail=Save failed. +nfv-sdnc-iui-message-sdnc-already-exists=SDNC already exists. +nfv-sdnc-iui-message-update-success=Update successfully. +nfv-sdnc-iui-message-update-fail=Update failed. +nfv-sdnc-iui-message-delete-confirm=Do you want to delete the current sdnc? +nfv-sdnc-iui-message-delete-success=SDNC deleted successfully. +nfv-sdnc-iui-message-delete-fail=SDNC deleted failed. + +nfv-sdnc-iui-text-update=Modify sdnc info +nfv-sdnc-iui-text-register=Register sdnc info +nfv-sdnc-iui-text-name=Name +nfv-sdnc-iui-text-type=type +nfv-sdnc-iui-text-version=version +nfv-sdnc-iui-text-certificateUrl=certificate URL +nfv-sdnc-iui-text-vendor=Vendor +nfv-sdnc-iui-text-userName=Username +nfv-sdnc-iui-text-password=Password +nfv-sdnc-iui-text_description=Description +nfv-sdnc-iui-text-cancelBtn=cancel +nfv-sdnc-iui-text-saveBtn=save +nfv-sdnc-iui-text-registerBtn=Register +nfv-sdnc-iui-text-status-normal=Normal +nfv-sdnc-iui-text-status-fail=Abnormal +nfv-sdnc-iui-text-total=Total +nfv-sdnc-iui-text-total-sdnc= of sdnc + +nfv-sdnc-iui-validate-name=Please enter a name +nfv-sdnc-iui-validate-type=Please enter the sdnc type +nfv-sdnc-iui-validate-version=Please enter version +nfv-sdnc-iui-validate-vendor=Please enter vendor +nfv-sdnc-iui-validate-sdnc=Please select a SDNC +nfv-sdnc-iui-validate-url-required=Please enter the URL +nfv-sdnc-iui-validate-url=Please enter the right URL +nfv-sdnc-iui-text-url-tip=Example: http://10.0.0.1 diff --git a/portal/src/main/webapp/extsys/sdncontroller/i18n/nfv-nso-iui-i18n-zh-CN.properties b/portal/src/main/webapp/extsys/sdncontroller/i18n/nfv-nso-iui-i18n-zh-CN.properties new file mode 100644 index 0000000..df3a227 --- /dev/null +++ b/portal/src/main/webapp/extsys/sdncontroller/i18n/nfv-nso-iui-i18n-zh-CN.properties @@ -0,0 +1,54 @@ +# +# Copyright 2016-2017 ZTE Corporation. +# +# 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. +# + +//sdnc +nfv-sdnc-iui-title=SDNC管理 +nfv-sdnc-iui-message-title=SDNC信息 +nfv-sdnc-iui-message-query-fail=查询SDNC失败。 +nfv-sdnc-iui-message-save-success=保存成功。 +nfv-sdnc-iui-message-save-fail=保存失败。 +nfv-sdnc-iui-message-sdnc-already-exists=SDNC已经存在 +nfv-sdnc-iui-message-update-success=修改成功。 +nfv-sdnc-iui-message-update-fail=修改失败。 +nfv-sdnc-iui-message-delete-confirm=确定删除所选sdnc信息？ +nfv-sdnc-iui-message-delete-success=删除成功 +nfv-sdnc-iui-message-delete-fail=删除失败 +nfv-sdnc-iui-text-update=修改SDNC信息 +nfv-sdnc-iui-text-register=注册SDNC信息 +nfv-sdnc-iui-text-name=名称 +nfv-sdnc-iui-text-type=类型 +nfv-sdnc-iui-text-version=版本 +nfv-sdnc-iui-text-certificateUrl=认证url +nfv-sdnc-iui-text_description=描述 +nfv-sdnc-iui-text-vendor=厂商 +nfv-sdnc-iui-text-userName=接入用户 +nfv-sdnc-iui-text-password=接入密码 +nfv-sdnc-iui-text-cancelBtn=取消 +nfv-sdnc-iui-text-saveBtn=保存 +nfv-sdnc-iui-text-registerBtn=注册SDNC +nfv-sdnc-iui-text-status-normal=正常 +nfv-sdnc-iui-text-status-fail=报警 +nfv-sdnc-iui-text-total=共 +nfv-sdnc-iui-text-total-sdnc=SDNC + +nfv-sdnc-iui-validate-name=请输入名称 +nfv-sdnc-iui-validate-type=请输入SDNC类型 +nfv-sdnc-iui-validate-version=请输入版本号 +nfv-sdnc-iui-validate-vendor=请输入厂商 +nfv-sdnc-iui-validate-vim=请选择SDNC +nfv-sdnc-iui-validate-url-required=请输入URL +nfv-sdnc-iui-validate-url=请输入正确的URL +nfv-sdnc-iui-text-url-tip=例如：http://10.0.0.1
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/sdncontroller/js/commonUtil.js b/portal/src/main/webapp/extsys/sdncontroller/js/commonUtil.js new file mode 100644 index 0000000..44a72f3 --- /dev/null +++ b/portal/src/main/webapp/extsys/sdncontroller/js/commonUtil.js @@ -0,0 +1,128 @@ +/* + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ +var commonUtil = {}; +commonUtil.arrayRemove = function (aryInstance, index) { + if (aryInstance == undefined || aryInstance == null) { + return; + } + for (var i = 0, n = 0; i < aryInstance.length; i++) { + if (aryInstance[i] != aryInstance[dx]) { + aryInstance[n++] = aryInstance[i]; + } + } + aryInstance.length -= 1; +}; + +//For the expansion of the Date, convert the Date to specify the format String +// examples： +// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 +// (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18 +commonUtil.parseDate = function (dateObj, format) { + var o = { + "M+": dateObj.getMonth() + 1, //month + "d+": dateObj.getDate(), //day + "h+": dateObj.getHours(), //hour + "m+": dateObj.getMinutes(), //minute + "s+": dateObj.getSeconds(), //second + "q+": Math.floor((dateObj.getMonth() + 3) / 3), //quarter + "S": dateObj.getMilliseconds() //millisecond + } + if (/(y+)/.test(format)) format = format.replace(RegExp.$1, + (dateObj.getFullYear() + "").substr(4 - RegExp.$1.length)); + for (var k in o) + if (new RegExp("(" + k + ")").test(format)) + format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : + ("00" + o[k]).substr(("" + o[k]).length)); + return format; +}; + +//tooltip +commonUtil.showMessage = function (message, type) { + $.growl({ + icon: "fa fa-envelope-o fa-lg", + title: " " + $.i18n.prop("nfv-nso-iui-common-tip"), + message: message + }, { + type: type + }); +}; + +commonUtil.registerCometdMessage = function (url, channel, callback) { + var cometd = new $.Cometd(); + var cometdURL = location.protocol + "//" + location.host + url; + cometd.configure({ + url: cometdURL, + logLevel: "info" + }); + // unregister websocket transport, use long-polling transport + cometd.unregisterTransport('websocket'); + // store channel object parameters(this object include channel and callback function), start from arguments[1] + var _args = arguments; + + cometd.addListener("/meta/handshake", function (handshake) { + if (handshake.successful === true) { + cometd.batch(function () { + //subscribe channel + cometd.subscribe(channel, function (message) { + callback.call(this, message.data); + }); + }); + } + }); + cometd.handshake(); +} + +commonUtil.format = function () { + if (arguments.length == 0) { + return null; + } + var str = arguments[0]; + for (var i = 0; i < arguments.length; i++) { + var reg = new RegExp("\\{" + (i - 1) + "\\}", "gm"); + str = str.replace(reg, arguments[i]); + } + return str; +} + +commonUtil.get = function (url, params, callback) { + $.ajax({ + type: "GET", + url: url, + //contentType : contentType || "application/x-www-form-urlencoded; charset=UTF-8", + dataType: "json", + data: params || {}, + success: callback + }); +} + +commonUtil.post = function (url, params, callback, contentType) { + $.ajax({ + type: "POST", + url: url, + contentType: contentType || "application/x-www-form-urlencoded; charset=UTF-8", + data: params || {}, + success: callback + }); +} + +commonUtil.delete = function (url, callback, contentType) { + $.ajax({ + type: "DELETE", + url: url, + contentType: contentType || "application/x-www-form-urlencoded; charset=UTF-8", + success: callback + }); +}
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/sdncontroller/js/loadi18n_nsoc.js b/portal/src/main/webapp/extsys/sdncontroller/js/loadi18n_nsoc.js new file mode 100644 index 0000000..45224af --- /dev/null +++ b/portal/src/main/webapp/extsys/sdncontroller/js/loadi18n_nsoc.js @@ -0,0 +1,38 @@ +/* + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ +function loadPropertiesSideMenu(lang, fileNamePrefix, filePath) { + jQuery.i18n.properties({ + language: lang, + name: fileNamePrefix, + path: filePath, + mode: 'map', + callback: function () { + var i18nItems = $("[name_i18n=com_zte_nfv_nsoc_i18n]"); + for (var i = 0; i < i18nItems.length; i++) { + var $item = $(i18nItems.eq(i)); + var itemId = $item.attr("id_i18n"); + var itemTitle = $item.attr("title"); + if (typeof(itemTitle) != "undefined") { + $item.attr("title", $.i18n.prop(itemId)); + } else { + $item.text($.i18n.prop(itemId)); + } + } + } + }); +} +var lang = getLanguage(); +loadPropertiesSideMenu(lang, 'nfv-nso-iui-i18n', 'i18n/');
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/sdncontroller/js/sdnc-validate.js b/portal/src/main/webapp/extsys/sdncontroller/js/sdnc-validate.js new file mode 100644 index 0000000..7cca638 --- /dev/null +++ b/portal/src/main/webapp/extsys/sdncontroller/js/sdnc-validate.js @@ -0,0 +1,89 @@ +/* + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ +$(function () { + var form = $('#vnfm_form'); + var error = $('.alert-danger', form); + var success = $('.alert-success', form); + + form.validate({ + doNotHideMessage: true, //this option enables to show the error/success messages on tab switch. + errorElement: 'span', //default input error message container + errorClass: 'help-block', // default input error message class + focusInvalid: false, // do not focus the last invalid input + rules: { + name: { + required: true, + maxlength: 20 + }, + type: { + required: true, + maxlength: 20 + }, + version: { + required: true, + maxlength: 20 + }, + vendor: { + required: true, + maxlength: 20 + }, + url: { + required: true, + url: true + } + }, + messages: { + name: { + required: $.i18n.prop("nfv-ems-iui-validate-name") + }, + type: { + required: $.i18n.prop("nfv-ems-iui-validate-type") + }, + version: { + required: $.i18n.prop("nfv-ems-iui-validate-version") + }, + vendor: { + required: $.i18n.prop("nfv-ems-iui-validate-vendor") + }, + url: { + required: $.i18n.prop("nfv-ems-iui-validate-url-required"), + url: $.i18n.prop("nfv-ems-iui-validate-url") + } + }, + errorPlacement: function (error, element) { // render error placement for each input type + error.insertAfter(element); // for other inputs, just perform default behavior + }, + invalidHandler: function (event, validator) { //display error alert on form submit + success.hide(); + error.show(); + }, + highlight: function (element) { // hightlight error inputs + $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group + }, + unhighlight: function (element) { // revert the change done by hightlight + $(element).closest('.form-group').removeClass('has-error'); // set error class to the control group + }, + success: function (label) { + label.addClass('valid') // mark the current input as valid and display OK icon + .closest('.form-group').removeClass('has-error'); // set success class to the control group + }, + submitHandler: function (form) { + success.show(); + error.hide(); + //add here some ajax code to submit your form or just call form.submit() if you want to submit the form without ajax + } + }); +});
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/sdncontroller/js/sdncController.js b/portal/src/main/webapp/extsys/sdncontroller/js/sdncController.js new file mode 100644 index 0000000..ef663b0 --- /dev/null +++ b/portal/src/main/webapp/extsys/sdncontroller/js/sdncController.js @@ -0,0 +1,268 @@ +/* + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ + +var vm = avalon.define({ + $id: "emsController", + sdncList: [], + currentElement: {}, + currentIndex: 0, + $sdncList: [], + $newElement: { + "sdnControllerId":"a6c42529-cd6", + "name":"sdnc1", + "status": "active", + "url":"", + "userName":"admin", + "password":"admin", + "version":"v1.0", + "vendor":"ZTE", + "description":"", + "protocol":"netconf", + "productName":"", + "type":"WAN" + }, + vimSelectItems: [], + saveType: "add", + server_rtn: { + info_block: false, + warning_block: false, + rtn_info: "", + $RTN_SUCCESS: "RTN_SUCCESS", + $RTN_FAILED: "RTN_FAILED" + }, + modalTitle: $.i18n.prop("nfv-sdnc-iui-text-register"), + urlTip: "", + currentStep: 1, + status: { + success: "active", + failed: "inactive" + }, + $format: { + "ipv4": /^((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))))$/, + "port": /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/, + "url": /^(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?$/ + }, + $restUrl: { + queryEmsInfoUrl: "/esrui/extsys/sdncontroller/mock-data/sdnc.json",//'/onapapi/aai/esr/v1/ems', + addVnfmInfoUrl: '/onapapi/aai/esr/v1/ems', + updateVnfmInfoUrl: '/onapapi/aai/esr/v1/ems/', + delVnfmInfoUrl: '/onapapi/aai/esr/v1/ems/', + queryMocUrl: '', + queryVimUrl: '/onapapi/aai/esr/v1/vims' + }, + $htmlText: { + saveSuccess: $.i18n.prop("nfv-sdnc-iui-message-save-success"), + saveFail: $.i18n.prop("nfv-sdnc-iui-message-save-fail"), + alreadyExist: $.i18n.prop("nfv-sdnc-iui-message-ems-already-exists"), + updateSuccess: $.i18n.prop("nfv-sdnc-iui-message-update-success"), + updateFail: $.i18n.prop("nfv-sdnc-iui-message-update-fail") + }, + $initTable: function () { + $.ajax({ + "type": 'GET', + "url": vm.$restUrl.queryEmsInfoUrl, + "dataType": "json", + "success": function (resp) { + vm.sdncList = resp; + vm.$sdncList = $.extend(true, [], resp) ; + }, + error: function (XMLHttpRequest, textStatus, errorThrown) { + bootbox.alert($.i18n.prop("nfv-sdnc-iui-message-query-fail") + "：" + textStatus + ":" + errorThrown); + return; + }, + complete: function () { + $("[data-toggle='tooltip']").tooltip(); + } + }); + }, + $registerSDNC: function () { + vm.currentIndex = -1; + vm.currentElement = $.extend(true, {}, vm.$newElement); + vm.saveType = "add"; + vm.modalTitle = $.i18n.prop("nfv-sdnc-iui-text-register"); + vm.$showTable(); + }, + $showTable: function () { + $(".form-group").removeClass('has-success').removeClass('has-error'); + $("#addEmsDlg").modal("show"); + }, + dismiss: function () { + if(vm.currentIndex !== -1){ + vm.currentElement.name = vm.$sdncList[vm.currentIndex].name; + } + $("#addEmsDlg").modal("hide"); + }, + $saveSDNC: function () { + var form = $('#vnfm_form'); + if(!vm.validate()){ + return; + } + vm.server_rtn.info_block = true; + vm.server_rtn.warning_block = false; + + //save VIM info + var res = false; + if (vm.saveType == "add") { + res = vm.postSDNC(); + } else { + res = vm.putSDNC(); + } + if(res){ + $("#addEmsDlg").modal("hide"); + } + }, + updateSDNC: function (index) { + vm.saveType = "update"; + vm.currentIndex = index; + vm.fillElement(vm.sdncList[vm.currentIndex], vm.currentElement) + vm.$showTable(); + }, + validate: function () { + var res = true; + var sdncSave = vm.getSDNCSave(); + var url = sdncSave.url; + if(!vm.$format.url.test(url)){ + $("#form_sdnc input[name='url']").next().html("The url format is incorrect"); + res = res && false; + } else { + $("#form_sdnc input[name='url']").next().html(""); + } + return res; + }, + delSDNC: function (id, index) { + bootbox.confirm($.i18n.prop("nfv-sdnc-iui-message-delete-confirm"), function (result) { + if (result) { + vm.sdncList.splice(index, 1); + vm.$sdncList.splice(index, 1); + console.log(vm.sdncList[index]); + /* $.ajax({ + type: "DELETE", + url: vm.$restUrl.delVnfmInfoUrl + id, + dataType: "json", + success: function (data, statusText, jqXHR) { + if (jqXHR.status == "204") { + + commonUtil.showMessage($.i18n.prop("nfv-sdnc-iui-message-delete-success"), "success"); + } else { + commonUtil.showMessage($.i18n.prop("nfv-sdnc-iui-message-delete-fail"), "warning"); + } + }, + error: function () { + commonUtil.showMessage($.i18n.prop("nfv-sdnc-iui-message-delete-fail"), "warning"); + } + });*/ + } + }); + }, + postSDNC: function () { + var emsSave = vm.getSDNCSave(); + emsSave.sdnControllerId = Math.floor(Math.random() * 100000) / 100000; + vm.sdncList.push(emsSave); + vm.$sdncList.push(emsSave); + console.log(emsSave); + return true; + /*$.ajax({ + type: "POST", + url: vm.$restUrl.addVnfmInfoUrl, + data: JSON.stringify(vm.currentElement), + dataType: "json", + contentType: "application/json", + success: function (data) { + vm.server_rtn.info_block = false; + vm.server_rtn.warning_block = false; + if (data) { + vm.vnfmInfo = []; + vm.$initTable(); + + $('#addEmsDlg').modal('hide'); + commonUtil.showMessage(vm.$htmlText.saveSuccess, "success"); + } else { + vm.server_rtn.warning_block = true; + vm.server_rtn.rtn_info = vm.$htmlText.saveFail; + commonUtil.showMessage(vm.$htmlText.saveFail, "failed"); + } + }, + error: function (XMLHttpRequest, textStatus, errorThrown) { + vm.server_rtn.warning_block = true; + vm.server_rtn.rtn_info = textStatus + ":" + errorThrown; + vm.server_rtn.info_block = false; + } + });*/ + }, + putSDNC: function () { + console.log(vm.getSDNCSave()); + vm.fillElement(vm.currentElement, vm.sdncList[vm.currentIndex]); + return true; + /* $.ajax({ + type: "PUT", + url: vm.$restUrl.updateVnfmInfoUrl + vm.currentElement.emsId, + data: JSON.stringify(vm.currentElement), + dataType: "json", + contentType: "application/json", + success: function (data) { + vm.server_rtn.info_block = false; + vm.server_rtn.warning_block = false; + if (data) { + for (var i = 0; i < vm.vnfmInfo.length; i++) { + if (vm.vnfmInfo[i].vnfmId == vm.addVnfm.vnfmId) { + vm.vnfmInfo[i].name = vm.addVnfm.name; + vm.vnfmInfo[i].vimId = $("#vimId").val(); + vm.vnfmInfo[i].vendor = vm.addVnfm.vendor; + vm.vnfmInfo[i].version = vm.addVnfm.version; + vm.vnfmInfo[i].certificateUrl = vm.addVnfm.certificateUrl; + vm.vnfmInfo[i].description = vm.addVnfm.description; + vm.vnfmInfo[i].url = vm.addVnfm.url; + vm.vnfmInfo[i].userName = vm.addVnfm.userName; + vm.vnfmInfo[i].password = vm.addVnfm.password; + } + } + $('#addEmsDlg').modal('hide'); + commonUtil.showMessage(vm.$htmlText.updateSuccess, "success"); + } else { + vm.server_rtn.warning_block = true; + vm.server_rtn.rtn_info = vm.$htmlText.updateFail; + commonUtil.showMessage(vm.$htmlText.updateFail, "failed"); + } + }, + error: function (XMLHttpRequest, textStatus, errorThrown) { + vm.server_rtn.warning_block = true; + vm.server_rtn.rtn_info = textStatus + ":" + errorThrown; + vm.server_rtn.info_block = false; + } + });*/ + }, + fillElement: function (sourceElement, targetElement) { + targetElement["sdnControllerId"] = sourceElement["sdnControllerId"]; + targetElement["name"] = sourceElement["name"]; + targetElement["status"] = sourceElement["status"]; + targetElement["url"] = sourceElement["url"]; + targetElement["userName"] = sourceElement["userName"]; + targetElement["password"] = sourceElement["password"]; + targetElement["version"] = sourceElement["version"]; + targetElement["vendor"] = sourceElement["vendor"]; + targetElement["description"] = sourceElement["description"]; + targetElement["protocol"] = sourceElement["protocol"]; + targetElement["productName"] = sourceElement["productName"]; + targetElement["type"] = sourceElement["type"]; + }, + getSDNCSave: function () { + var emsSave = $.extend(true, {}, vm.currentElement.$model); + return emsSave; + } + }); +vm.currentElement = $.extend(true, {}, vm.$newElement); +avalon.scan(); +vm.$initTable();
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/sdncontroller/mock-data/sdnc.json b/portal/src/main/webapp/extsys/sdncontroller/mock-data/sdnc.json new file mode 100644 index 0000000..d432191 --- /dev/null +++ b/portal/src/main/webapp/extsys/sdncontroller/mock-data/sdnc.json @@ -0,0 +1,30 @@ +[
+ {
+ "sdnControllerId":"a6c42529-cd6b-4c01-b149-03eb54b20a03",
+ "name":"sdnc1",
+ "status": "active",
+ "url":"http://10.74.151.13:8181",
+ "userName":"admin",
+ "password":"admin",
+ "version":"v1.0",
+ "vendor":"ZTE",
+ "description":"",
+ "protocol":"netconf",
+ "productName":"",
+ "type":"WAN"
+ },
+ {
+ "sdnControllerId":"a6c42529-cd6b-4c01-b149-03eb54b20a04",
+ "name":"sdnc2",
+ "status": "inactive",
+ "url":"http://10.74.151.13:8181",
+ "userName":"admin",
+ "password":"admin",
+ "version":"v1.0",
+ "vendor":"ZTE",
+ "description":"",
+ "protocol":"netconf",
+ "productName":"",
+ "type":"WAN"
+ }
+]
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/sdncontroller/sdncView.html b/portal/src/main/webapp/extsys/sdncontroller/sdncView.html new file mode 100644 index 0000000..6bcb68f --- /dev/null +++ b/portal/src/main/webapp/extsys/sdncontroller/sdncView.html @@ -0,0 +1,208 @@ +<!-- + + Copyright 2016-2017 ZTE Corporation. + + 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. + +--> +<!DOCTYPE html> +<html> +<head lang="en"> + <meta charset="UTF-8"> + <title></title> + <link href="../../thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet"/> + <link href="../../thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet"/> + <link href="../../thirdparty/uniform/css/uniform.default.min.css" rel="stylesheet"/> + <link href="../../thirdparty/css/ngict-component.css" rel="stylesheet"/> + <link href="css/animate.min.css" rel="stylesheet"/> + <link href="css/sdnc.css" rel="stylesheet"/> + <style> .ms-controller { visibility: hidden } </style> +</head> +<body> +<div ms-controller="emsController" class="container-fluid ms-controller"> + <div id="addEmsDlg" class="modal fade" tabindex="-1" role="dialog" + aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static"> + <div class="modal-dialog"> + <div class="modal-content Changepasswd"> + <div class="content"> + <div class="modal-header"> + <h4 id="myModalLabel">{{modalTitle}}</h4> + </div> + <div class="modal-body"> + <div class="step-content"> + <form class="form-horizontal" role="form" id="form_sdnc"> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>Name</span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="currentElement.name" name="name" class="form-control"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>Url</span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="currentElement.url" name="url" class="form-control"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>Username</span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="currentElement.userName" name="userName" class="form-control"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>Password</span> + </label> + <div class="col-sm-7"> + <input type="password" class="form-control" rows="3" ms-duplex="currentElement.password" name="password"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>Version</span> + </label> + <div class="col-sm-7"> + <input class="form-control" rows="3" ms-duplex="currentElement.version" name="version"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>Vendor</span> + </label> + <div class="col-sm-7"> + <input class="form-control" rows="3" ms-duplex="currentElement.vendor" name="vendor"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>Protocol</span> + </label> + <div class="col-sm-7"> + <input class="form-control" rows="3" ms-duplex="currentElement.protocol" name="protocol"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>ProductName</span> + </label> + <div class="col-sm-7"> + <input class="form-control" rows="3" ms-duplex="currentElement.productName" name="productName"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>Type</span> + </label> + <div class="col-sm-7"> + <input class="form-control" rows="3" ms-duplex="currentElement.type" name="type"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>Description</span> + </label> + <div class="col-sm-7"> + <input class="form-control" rows="3" ms-duplex="currentElement.description" name="description"/> + <span class="help-block"></span> + </div> + </div> + </form> + </div> + </div> + <div class="modal-footer"> + <button class="btn btn-primary" id="btnSave" ms-click="$saveSDNC" id_i18n="nfv-sdnc-iui-text-saveBtn" name_i18n="com_zte_nfv_nsoc_i18n"></button> + <button class="btn" id="btnCancel" ms-click="dismiss" aria-hidden="true" id_i18n="nfv-sdnc-iui-text-cancelBtn" name_i18n="com_zte_nfv_nsoc_i18n"></button> + </div> + </div> + </div> + </div> + </div> + <div class="row-fluid" data-name="cond_zone"> + <div class="col-md-12"> + <button class="btn white radius_l" id="app-new-btn" ms-click="$registerSDNC"> + <i class="ict-new"></i> <span id_i18n="nfv-sdnc-iui-text-registerBtn" name_i18n="com_zte_nfv_nsoc_i18n"></span> + </button> + </div> + </div> + + <div class="col-sm-12 vnfm-padding" ms-each-el="sdncList"> + <div class="col-sm-3 animated-panel zoomIn"> + <div class="hpanel stats"> + <div class="panel-body h-200" ms-hover="hpanel_show"> + <div class="pull-left"> + <span class="label label-success" ms-if="el.status == status.success" id_i18n="nfv-sdnc-iui-text-status-normal" name_i18n="com_zte_nfv_nsoc_i18n"></span> + <span class="label label-danger" ms-if="el.status == status.failed" ms-attr-title="el.errorInfo" data-toggle="tooltip" id_i18n="nfv-sdnc-iui-text-status-fail" name_i18n="com_zte_nfv_nsoc_i18n"></span> + </div> + <div class="stats-icon pull-right"> + <i class="fa fa-server fa-5x color_cloud"></i> + </div> + <div class="m-t-xl"> + <h3 ms-text="el.name"></h3> + <!--<div class="card-name"><span ms-text="el.emsName"></span></div>--> + </div> + </div> + <div class="panel-footer"> + <div class="pull-right"> + <a class="btn btn-default btn-sm" ms-click="updateSDNC($index)"><i class="fa fa-pencil-square-o fa-lg"></i></a> + <a class="btn btn-default btn-sm" ms-click="delSDNC(el.emsId, $index)"><i class="fa fa-trash-o fa-lg"></i></a> + </div> + </div> + </div> + </div> + </div> + <div class="col-sm-12"> + <div class="pull-left text-muted"> + <small><span id_i18n="nfv-sdnc-iui-text-total" name_i18n="com_zte_nfv_nsoc_i18n"></span> <span class="blue-font" ms-text="sdncList.size()"></span> + <span id_i18n="nfv-sdnc-iui-text-total-sdnc" name_i18n="com_zte_nfv_nsoc_i18n"></span></small> + </div> + </div> +</div> +<script type="text/javascript" src="../../thirdparty/jquery/jquery-1.10.2.min.js"></script> +<script type="text/javascript" src="../../thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script> +<script type="text/javascript" src="../../thirdparty/bootstrap/js/bootstrap.min.js"></script> +<script type="text/javascript" src="../../thirdparty/bootbox/bootbox.min.js"></script> +<script type="text/javascript" src="../../thirdparty/jquery-validation/js/jquery.validate.min.js"></script> +<script type="text/javascript" src="../../thirdparty/jquery-validation/js/additional-methods.min.js"></script> + +<script type="text/javascript" src="../../thirdparty/bootstrap-growl/bootstrap-growl.min.js"></script> +<!--<script type="text/javascript" src="../../thirdparty/cometd/cometd.js"></script>--> +<!--<script type="text/javascript" src="../../thirdparty/cometd/jquery.cometd.js"></script>--> +<script type="text/javascript" src="../../thirdparty/avalon/avalon.js"></script> + +<script type="text/javascript" src="../../thirdparty/js/tools.js"></script> + +<script type="text/javascript" src="js/commonUtil.js"></script> +<script type="text/javascript" src="js/loadi18n_nsoc.js"></script> + +<script type="text/javascript" src="js/sdnc-validate.js"></script> +<script type="text/javascript" src="js/sdncController.js"></script> +</body> +</html>
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/vim/css/bootstrap.css b/portal/src/main/webapp/extsys/vim/css/bootstrap.css new file mode 100644 index 0000000..236640f --- /dev/null +++ b/portal/src/main/webapp/extsys/vim/css/bootstrap.css @@ -0,0 +1,4966 @@ +/** + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section { + display: block; +} + +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} + +audio:not([controls]) { + display: none; +} + +html { + font-size: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +a:focus { + outline: thin dotted #333; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} + +a:hover, +a:active { + outline: 0; +} + +sub, +sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +img { + max-width: 100%; + vertical-align: middle; + border: 0; + -ms-interpolation-mode: bicubic; +} + +button, +input, +select, +textarea { + margin: 0; + font-size: 100%; + vertical-align: middle; +} + +button, +input { + *overflow: visible; + line-height: normal; +} + +button::-moz-focus-inner, +input::-moz-focus-inner { + padding: 0; + border: 0; +} + +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; +} + +input[type="search"] { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + -webkit-appearance: textfield; +} + +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; +} + +textarea { + overflow: auto; + vertical-align: top; +} + +.clearfix { + *zoom: 1; +} + +.clearfix:before, +.clearfix:after { + display: table; + content: ""; +} + +.clearfix:after { + clear: both; +} + +.hide-text { + font: 0/0 a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} + +.input-block-level { + display: block; + width: 100%; + min-height: 28px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} + +body { + margin: 0; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 13px; + line-height: 18px; + color: #333333; + background-color: #ffffff; +} + +a { + color: #0088cc; + text-decoration: none; +} + +a:hover { + color: #005580; + text-decoration: underline; +} + +.row { + margin-left: -20px; + *zoom: 1; +} + +.row:before, +.row:after { + display: table; + content: ""; +} + +.row:after { + clear: both; +} + +[class*="span"] { + float: left; + margin-left: 20px; +} + +.container, +.navbar-fixed-top .container, +.navbar-fixed-bottom .container { + width: 940px; +} + +.span12 { + width: 940px; +} + +.span11 { + width: 860px; +} + +.span10 { + width: 780px; +} + +.span9 { + width: 700px; +} + +.span8 { + width: 620px; +} + +.span7 { + width: 540px; +} + +.span6 { + width: 460px; +} + +.span5 { + width: 380px; +} + +.span4 { + width: 300px; +} + +.span3 { + width: 220px; +} + +.span2 { + width: 140px; +} + +.span1 { + width: 60px; +} + +.offset12 { + margin-left: 980px; +} + +.offset11 { + margin-left: 900px; +} + +.offset10 { + margin-left: 820px; +} + +.offset9 { + margin-left: 740px; +} + +.offset8 { + margin-left: 660px; +} + +.offset7 { + margin-left: 580px; +} + +.offset6 { + margin-left: 500px; +} + +.offset5 { + margin-left: 420px; +} + +.offset4 { + margin-left: 340px; +} + +.offset3 { + + margin-left: 260px; +} + +.offset2 { + margin-left: 180px; +} + +.offset1 { + margin-left: 100px; +} + +.row-fluid { + width: 100%; + *zoom: 1; +} + +.row-fluid:before, +.row-fluid:after { + display: table; + content: ""; +} + +.row-fluid:after { + clear: both; +} + +.row-fluid [class*="span"] { + display: block; + float: left; + width: 100%; + min-height: 28px; + margin-left: 2.127659574%; + *margin-left: 2.0744680846382977%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} + +.row-fluid [class*="span"]:first-child { + margin-left: 0; +} + +.row-fluid .span12 { + width: 99.99999998999999%; + *width: 99.94680850063828%; +} + +.row-fluid .span11 { + width: 91.489361693%; + *width: 91.4361702036383%; +} + +.row-fluid .span10 { + width: 82.97872339599999%; + *width: 82.92553190663828%; +} + +.row-fluid .span9 { + width: 74.468085099%; + *width: 74.4148936096383%; +} + +.row-fluid .span8 { + width: 65.95744680199999%; + *width: 65.90425531263828%; +} + +.row-fluid .span7 { + width: 57.446808505%; + *width: 57.3936170156383%; +} + +.row-fluid .span6 { + width: 48.93617020799999%; + *width: 48.88297871863829%; +} + +.row-fluid .span5 { + width: 40.425531911%; + *width: 40.3723404216383%; +} + +.row-fluid .span4 { + width: 31.914893614%; + *width: 31.8617021246383%; +} + +.row-fluid .span3 { + width: 23.404255317%; + *width: 23.3510638276383%; +} + +.row-fluid .span2 { + width: 14.89361702%; + *width: 14.8404255306383%; +} + +.row-fluid .span1 { + width: 6.382978723%; + *width: 6.329787233638298%; +} + +.container { + margin-right: auto; + margin-left: auto; + *zoom: 1; +} + +.container:before, +.container:after { + display: table; + content: ""; +} + +.container:after { + clear: both; +} + +.container-fluid { + padding-right: 20px; + padding-left: 20px; + *zoom: 1; +} + +.container-fluid:before, +.container-fluid:after { + display: table; + content: ""; +} + +.container-fluid:after { + clear: both; +} + +p { + margin: 0 0 9px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 13px; + line-height: 18px; +} + +p small { + font-size: 11px; + color: #999999; +} + +.lead { + margin-bottom: 18px; + font-size: 20px; + font-weight: 200; + line-height: 27px; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; + font-family: inherit; + font-weight: bold; + color: inherit; + text-rendering: optimizelegibility; +} + +h1 small, +h2 small, +h3 small, +h4 small, +h5 small, +h6 small { + font-weight: normal; + color: #999999; +} + +h1 { + font-size: 30px; + line-height: 36px; +} + +h1 small { + font-size: 18px; +} + +h2 { + font-size: 24px; + line-height: 36px; +} + +h2 small { + font-size: 18px; +} + +h3 { + font-size: 18px; + line-height: 27px; +} + +h3 small { + font-size: 14px; +} + +h4, +h5, +h6 { + line-height: 18px; +} + +h4 { + font-size: 14px; +} + +h4 small { + font-size: 12px; +} + +h5 { + font-size: 12px; +} + +h6 { + font-size: 11px; + color: #999999; + text-transform: uppercase; +} + +.page-header { + padding-bottom: 17px; + margin: 18px 0; + border-bottom: 1px solid #eeeeee; +} + +.page-header h1 { + line-height: 1; +} + +ul, +ol { + padding: 0; + margin: 0 0 9px 25px; +} + +ul ul, +ul ol, +ol ol, +ol ul { + margin-bottom: 0; +} + +ul { + list-style: disc; +} + +ol { + list-style: decimal; +} + +li { + line-height: 18px; +} + +ul.unstyled, +ol.unstyled { + margin-left: 0; + list-style: none; +} + +dl { + margin-bottom: 18px; +} + +dt, +dd { + line-height: 18px; +} + +dt { + font-weight: bold; + line-height: 17px; +} + +dd { + margin-left: 9px; +} + +.dl-horizontal dt { + float: left; + width: 120px; + overflow: hidden; + clear: left; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; +} + +.dl-horizontal dd { + margin-left: 130px; +} + +hr { + margin: 18px 0; + border: 0; + border-top: 1px solid #eeeeee; + border-bottom: 1px solid #ffffff; +} + +strong { + font-weight: bold; +} + +em { + font-style: italic; +} + +.muted { + color: #999999; +} + +abbr[title] { + cursor: help; + border-bottom: 1px dotted #ddd; +} + +abbr.initialism { + font-size: 90%; + text-transform: uppercase; +} + +blockquote { + padding: 0 0 0 15px; + margin: 0 0 18px; + border-left: 5px solid #eeeeee; +} + +blockquote p { + margin-bottom: 0; + font-size: 16px; + font-weight: 300; + line-height: 22.5px; +} + +blockquote small { + display: block; + line-height: 18px; + color: #999999; +} + +blockquote small:before { + content: '\2014 \00A0'; +} + +blockquote.pull-right { + float: right; + padding-right: 15px; + padding-left: 0; + border-right: 5px solid #eeeeee; + border-left: 0; +} + +blockquote.pull-right p, +blockquote.pull-right small { + text-align: right; +} + +q:before, +q:after, +blockquote:before, +blockquote:after { + content: ""; +} + +address { + display: block; + margin-bottom: 18px; + font-style: normal; + line-height: 18px; +} + +small { + font-size: 100%; +} + +cite { + font-style: normal; +} + +code, +pre { + padding: 0 3px 2px; + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; + font-size: 12px; + color: #333333; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} + +code { + padding: 2px 4px; + color: #d14; + background-color: #f7f7f9; + border: 1px solid #e1e1e8; +} + +pre { + display: block; + padding: 8.5px; + margin: 0 0 9px; + font-size: 12.025px; + line-height: 18px; + word-break: break-all; + word-wrap: break-word; + white-space: pre; + white-space: pre-wrap; + background-color: #f5f5f5; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.15); + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +pre.prettyprint { + margin-bottom: 18px; +} + +pre code { + padding: 0; + color: inherit; + background-color: transparent; + border: 0; +} + +.pre-scrollable { + max-height: 340px; + overflow-y: scroll; +} + +form { + margin: 0 0 18px; +} + +fieldset { + padding: 0; + margin: 0; + border: 0; +} + +legend { + display: block; + width: 100%; + padding: 0; + margin-bottom: 27px; + font-size: 19.5px; + line-height: 36px; + color: #333333; + border: 0; + border-bottom: 1px solid #eee; +} + +legend small { + font-size: 13.5px; + color: #999999; +} + +label, +input, +button, +select, +textarea { + font-size: 13px; + font-weight: normal; + line-height: 18px; +} + +input, +button, +select, +textarea { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +label { + display: block; + margin-bottom: 5px; + color: #333333; +} + +input, +textarea, +select, +.uneditable-input { + display: inline-block; + width: 210px; + height: 18px; + padding: 4px; + margin-bottom: 9px; + font-size: 13px; + line-height: 18px; + color: #555555; + background-color: #ffffff; + border: 1px solid #cccccc; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} + +.uneditable-textarea { + width: auto; + height: auto; +} + +label input, +label textarea, +label select { + display: block; +} + +input[type="image"], +input[type="checkbox"], +input[type="radio"] { + width: auto; + height: auto; + padding: 0; + margin: 3px 0; + *margin-top: 0; + /* IE7 */ + + line-height: normal; + cursor: pointer; + background-color: transparent; + border: 0 \9; + /* IE9 and down */ + + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +input[type="image"] { + border: 0; +} + +input[type="file"] { + width: auto; + padding: initial; + line-height: initial; + background-color: #ffffff; + background-color: initial; + border: initial; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} + +input[type="button"], +input[type="reset"], +input[type="submit"] { + width: auto; + height: auto; +} + +select, +input[type="file"] { + height: 28px; + /* In IE7, the height of the select element cannot be changed by height, only font-size */ + + *margin-top: 4px; + /* For IE7, add top margin to align select with labels */ + + line-height: 28px; +} + +input[type="file"] { + line-height: 18px \9; +} + +select { + width: 220px; + background-color: #ffffff; +} + +select[multiple], +select[size] { + height: auto; +} + +input[type="image"] { + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} + +textarea { + height: auto; +} + +input[type="hidden"] { + display: none; +} + +.radio, +.checkbox { + min-height: 18px; + padding-left: 18px; +} + +.radio input[type="radio"], +.checkbox input[type="checkbox"] { + float: left; + margin-left: -18px; +} + +.controls > .radio:first-child, +.controls > .checkbox:first-child { + padding-top: 5px; +} + +.radio.inline, +.checkbox.inline { + display: inline-block; + padding-top: 5px; + margin-bottom: 0; + vertical-align: middle; +} + +.radio.inline + .radio.inline, +.checkbox.inline + .checkbox.inline { + margin-left: 10px; +} + +input, +textarea { + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; + -moz-transition: border linear 0.2s, box-shadow linear 0.2s; + -ms-transition: border linear 0.2s, box-shadow linear 0.2s; + -o-transition: border linear 0.2s, box-shadow linear 0.2s; + transition: border linear 0.2s, box-shadow linear 0.2s; +} + +input:focus, +textarea:focus { + border-color: rgba(82, 168, 236, 0.8); + outline: 0; + outline: thin dotted \9; + /* IE6-9 */ + + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); +} + +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus, +select:focus { + outline: thin dotted #333; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} + +.input-mini { + width: 60px; +} + +.input-small { + width: 90px; +} + +.input-medium { + width: 150px; +} + +.input-large { + width: 210px; +} + +.input-xlarge { + width: 270px; +} + +.input-xxlarge { + width: 530px; +} + +input[class*="span"], +select[class*="span"], +textarea[class*="span"], +.uneditable-input[class*="span"], +.row-fluid input[class*="span"], +.row-fluid select[class*="span"], +.row-fluid textarea[class*="span"], +.row-fluid .uneditable-input[class*="span"] { + float: none; + margin-left: 0; +} + +input, +textarea, +.uneditable-input { + margin-left: 0; +} + +input.span12, +textarea.span12, +.uneditable-input.span12 { + width: 930px; +} + +input.span11, +textarea.span11, +.uneditable-input.span11 { + width: 850px; +} + +input.span10, +textarea.span10, +.uneditable-input.span10 { + width: 770px; +} + +input.span9, +textarea.span9, +.uneditable-input.span9 { + width: 690px; +} + +input.span8, +textarea.span8, +.uneditable-input.span8 { + width: 610px; +} + +input.span7, +textarea.span7, +.uneditable-input.span7 { + width: 530px; +} + +input.span6, +textarea.span6, +.uneditable-input.span6 { + width: 450px; +} + +input.span5, +textarea.span5, +.uneditable-input.span5 { + width: 370px; +} + +input.span4, +textarea.span4, +.uneditable-input.span4 { + width: 290px; +} + +input.span3, +textarea.span3, +.uneditable-input.span3 { + width: 210px; +} + +input.span2, +textarea.span2, +.uneditable-input.span2 { + width: 130px; +} + +input.span1, +textarea.span1, +.uneditable-input.span1 { + width: 50px; +} + +input[disabled], +select[disabled], +textarea[disabled], +input[readonly], +select[readonly], +textarea[readonly] { + cursor: not-allowed; + background-color: #eeeeee; + border-color: #ddd; +} + +input[type="radio"][disabled], +input[type="checkbox"][disabled], +input[type="radio"][readonly], +input[type="checkbox"][readonly] { + background-color: transparent; +} + +.control-group.warning > label, +.control-group.warning .help-block, +.control-group.warning .help-inline { + color: #c09853; +} + +.control-group.warning input, +.control-group.warning select, +.control-group.warning textarea { + color: #c09853; + border-color: #c09853; +} + +.control-group.warning input:focus, +.control-group.warning select:focus, +.control-group.warning textarea:focus { + border-color: #a47e3c; + -webkit-box-shadow: 0 0 6px #dbc59e; + -moz-box-shadow: 0 0 6px #dbc59e; + box-shadow: 0 0 6px #dbc59e; +} + +.control-group.warning .input-prepend .add-on, +.control-group.warning .input-append .add-on { + color: #c09853; + background-color: #fcf8e3; + border-color: #c09853; +} + +.control-group.error > label, +.control-group.error .help-block, +.control-group.error .help-inline { + color: #b94a48; +} + +.control-group.error input, +.control-group.error select, +.control-group.error textarea { + color: #b94a48; + border-color: #b94a48; +} + +.control-group.error input:focus, +.control-group.error select:focus, +.control-group.error textarea:focus { + border-color: #953b39; + -webkit-box-shadow: 0 0 6px #d59392; + -moz-box-shadow: 0 0 6px #d59392; + box-shadow: 0 0 6px #d59392; +} + +.control-group.error .input-prepend .add-on, +.control-group.error .input-append .add-on { + color: #b94a48; + background-color: #f2dede; + border-color: #b94a48; +} + +.control-group.success > label, +.control-group.success .help-block, +.control-group.success .help-inline { + color: #468847; +} + +.control-group.success input, +.control-group.success select, +.control-group.success textarea { + color: #468847; + border-color: #468847; +} + +.control-group.success input:focus, +.control-group.success select:focus, +.control-group.success textarea:focus { + border-color: #356635; + -webkit-box-shadow: 0 0 6px #7aba7b; + -moz-box-shadow: 0 0 6px #7aba7b; + box-shadow: 0 0 6px #7aba7b; +} + +.control-group.success .input-prepend .add-on, +.control-group.success .input-append .add-on { + color: #468847; + background-color: #dff0d8; + border-color: #468847; +} + +input:focus:required:invalid, +textarea:focus:required:invalid, +select:focus:required:invalid { + color: #b94a48; + border-color: #ee5f5b; +} + +input:focus:required:invalid:focus, +textarea:focus:required:invalid:focus, +select:focus:required:invalid:focus { + border-color: #e9322d; + -webkit-box-shadow: 0 0 6px #f8b9b7; + -moz-box-shadow: 0 0 6px #f8b9b7; + box-shadow: 0 0 6px #f8b9b7; +} + +.form-actions { + padding: 17px 20px 18px; + margin-top: 18px; + margin-bottom: 18px; + background-color: #f5f5f5; + border-top: 1px solid #ddd; + *zoom: 1; +} + +.form-actions:before, +.form-actions:after { + display: table; + content: ""; +} + +.form-actions:after { + clear: both; +} + +.uneditable-input { + overflow: hidden; + white-space: nowrap; + cursor: not-allowed; + background-color: #ffffff; + border-color: #eee; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); +} + +:-moz-placeholder { + color: #999999; +} + +::-webkit-input-placeholder { + color: #999999; +} + +.help-block, +.help-inline { + color: #555555; +} + +.help-block { + display: block; + margin-bottom: 9px; +} + +.help-inline { + display: inline-block; + *display: inline; + padding-left: 5px; + vertical-align: middle; + *zoom: 1; +} + +.input-prepend, +.input-append { + margin-bottom: 5px; +} + +.input-prepend input, +.input-append input, +.input-prepend select, +.input-append select, +.input-prepend .uneditable-input, +.input-append .uneditable-input { + position: relative; + margin-bottom: 0; + *margin-left: 0; + vertical-align: middle; + -webkit-border-radius: 0 3px 3px 0; + -moz-border-radius: 0 3px 3px 0; + border-radius: 0 3px 3px 0; +} + +.input-prepend input:focus, +.input-append input:focus, +.input-prepend select:focus, +.input-append select:focus, +.input-prepend .uneditable-input:focus, +.input-append .uneditable-input:focus { + z-index: 2; +} + +.input-prepend .uneditable-input, +.input-append .uneditable-input { + border-left-color: #ccc; +} + +.input-prepend .add-on, +.input-append .add-on { + display: inline-block; + width: auto; + height: 18px; + min-width: 16px; + padding: 4px 5px; + font-weight: normal; + line-height: 18px; + text-align: center; + text-shadow: 0 1px 0 #ffffff; + vertical-align: middle; + background-color: #eeeeee; + border: 1px solid #ccc; +} + +.input-prepend .add-on, +.input-append .add-on, +.input-prepend .btn, +.input-append .btn { + margin-left: -1px; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +.input-prepend .active, +.input-append .active { + background-color: #a9dba9; + border-color: #46a546; +} + +.input-prepend .add-on, +.input-prepend .btn { + margin-right: -1px; +} + +.input-prepend .add-on:first-child, +.input-prepend .btn:first-child { + -webkit-border-radius: 3px 0 0 3px; + -moz-border-radius: 3px 0 0 3px; + border-radius: 3px 0 0 3px; +} + +.input-append input, +.input-append select, +.input-append .uneditable-input { + -webkit-border-radius: 3px 0 0 3px; + -moz-border-radius: 3px 0 0 3px; + border-radius: 3px 0 0 3px; +} + +.input-append .uneditable-input { + border-right-color: #ccc; + border-left-color: #eee; +} + +.input-append .add-on:last-child, +.input-append .btn:last-child { + -webkit-border-radius: 0 3px 3px 0; + -moz-border-radius: 0 3px 3px 0; + border-radius: 0 3px 3px 0; +} + +.input-prepend.input-append input, +.input-prepend.input-append select, +.input-prepend.input-append .uneditable-input { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +.input-prepend.input-append .add-on:first-child, +.input-prepend.input-append .btn:first-child { + margin-right: -1px; + -webkit-border-radius: 3px 0 0 3px; + -moz-border-radius: 3px 0 0 3px; + border-radius: 3px 0 0 3px; +} + +.input-prepend.input-append .add-on:last-child, +.input-prepend.input-append .btn:last-child { + margin-left: -1px; + -webkit-border-radius: 0 3px 3px 0; + -moz-border-radius: 0 3px 3px 0; + border-radius: 0 3px 3px 0; +} + +.search-query { + padding-right: 14px; + padding-right: 4px \9; + padding-left: 14px; + padding-left: 4px \9; + /* IE7-8 doesn't have border-radius, so don't indent the padding */ + + margin-bottom: 0; + -webkit-border-radius: 14px; + -moz-border-radius: 14px; + border-radius: 14px; +} + +.form-search input, +.form-inline input, +.form-horizontal input, +.form-search textarea, +.form-inline textarea, +.form-horizontal textarea, +.form-search select, +.form-inline select, +.form-horizontal select, +.form-search .help-inline, +.form-inline .help-inline, +.form-horizontal .help-inline, +.form-search .uneditable-input, +.form-inline .uneditable-input, +.form-horizontal .uneditable-input, +.form-search .input-prepend, +.form-inline .input-prepend, +.form-horizontal .input-prepend, +.form-search .input-append, +.form-inline .input-append, +.form-horizontal .input-append { + display: inline-block; + *display: inline; + margin-bottom: 0; + *zoom: 1; +} + +.form-search .hide, +.form-inline .hide, +.form-horizontal .hide { + display: none; +} + +.form-search label, +.form-inline label { + display: inline-block; +} + +.form-search .input-append, +.form-inline .input-append, +.form-search .input-prepend, +.form-inline .input-prepend { + margin-bottom: 0; +} + +.form-search .radio, +.form-search .checkbox, +.form-inline .radio, +.form-inline .checkbox { + padding-left: 0; + margin-bottom: 0; + vertical-align: middle; +} + +.form-search .radio input[type="radio"], +.form-search .checkbox input[type="checkbox"], +.form-inline .radio input[type="radio"], +.form-inline .checkbox input[type="checkbox"] { + float: left; + margin-right: 3px; + margin-left: 0; +} + +.control-group { + margin-bottom: 9px; +} + +legend + .control-group { + margin-top: 18px; + -webkit-margin-top-collapse: separate; +} + +.form-horizontal .control-group { + margin-bottom: 18px; + *zoom: 1; +} + +.form-horizontal .control-group:before, +.form-horizontal .control-group:after { + display: table; + content: ""; +} + +.form-horizontal .control-group:after { + clear: both; +} + +.form-horizontal .control-label { + float: left; + width: 140px; + padding-top: 5px; + text-align: right; +} + +.form-horizontal .controls { + *display: inline-block; + *padding-left: 20px; + margin-left: 160px; + *margin-left: 0; +} + +.form-horizontal .controls:first-child { + *padding-left: 160px; +} + +.form-horizontal .help-block { + margin-top: 9px; + margin-bottom: 0; +} + +.form-horizontal .form-actions { + padding-left: 160px; +} + +table { + max-width: 100%; + background-color: transparent; + border-collapse: collapse; + border-spacing: 0; +} + +.table { + width: 100%; + margin-bottom: 18px; +} + +.table th, +.table td { + padding: 8px; + line-height: 18px; + text-align: left; + vertical-align: top; + border-top: 1px solid #dddddd; +} + +.table th { + font-weight: bold; +} + +.table thead th { + vertical-align: bottom; +} + +.table caption + thead tr:first-child th, +.table caption + thead tr:first-child td, +.table colgroup + thead tr:first-child th, +.table colgroup + thead tr:first-child td, +.table thead:first-child tr:first-child th, +.table thead:first-child tr:first-child td { + border-top: 0; +} + +.table tbody + tbody { + border-top: 2px solid #dddddd; +} + +.table-condensed th, +.table-condensed td { + padding: 4px 5px; +} + +.table-bordered { + border: 1px solid #dddddd; + border-collapse: separate; + *border-collapse: collapsed; + border-left: 0; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +.table-bordered th, +.table-bordered td { + border-left: 1px solid #dddddd; +} + +.table-bordered caption + thead tr:first-child th, +.table-bordered caption + tbody tr:first-child th, +.table-bordered caption + tbody tr:first-child td, +.table-bordered colgroup + thead tr:first-child th, +.table-bordered colgroup + tbody tr:first-child th, +.table-bordered colgroup + tbody tr:first-child td, +.table-bordered thead:first-child tr:first-child th, +.table-bordered tbody:first-child tr:first-child th, +.table-bordered tbody:first-child tr:first-child td { + border-top: 0; +} + +.table-bordered thead:first-child tr:first-child th:first-child, +.table-bordered tbody:first-child tr:first-child td:first-child { + -webkit-border-top-left-radius: 4px; + border-top-left-radius: 4px; + -moz-border-radius-topleft: 4px; +} + +.table-bordered thead:first-child tr:first-child th:last-child, +.table-bordered tbody:first-child tr:first-child td:last-child { + -webkit-border-top-right-radius: 4px; + border-top-right-radius: 4px; + -moz-border-radius-topright: 4px; +} + +.table-bordered thead:last-child tr:last-child th:first-child, +.table-bordered tbody:last-child tr:last-child td:first-child { + -webkit-border-radius: 0 0 0 4px; + -moz-border-radius: 0 0 0 4px; + border-radius: 0 0 0 4px; + -webkit-border-bottom-left-radius: 4px; + border-bottom-left-radius: 4px; + -moz-border-radius-bottomleft: 4px; +} + +.table-bordered thead:last-child tr:last-child th:last-child, +.table-bordered tbody:last-child tr:last-child td:last-child { + -webkit-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; + -moz-border-radius-bottomright: 4px; +} + +.table-striped tbody tr:nth-child(odd) td, +.table-striped tbody tr:nth-child(odd) th { + background-color: #f9f9f9; +} + +.table tbody tr:hover td, +.table tbody tr:hover th { + background-color: #f5f5f5; +} + +table .span1 { + float: none; + width: 44px; + margin-left: 0; +} + +table .span2 { + float: none; + width: 124px; + margin-left: 0; +} + +table .span3 { + float: none; + width: 204px; + margin-left: 0; +} + +table .span4 { + float: none; + width: 284px; + margin-left: 0; +} + +table .span5 { + float: none; + width: 364px; + margin-left: 0; +} + +table .span6 { + float: none; + width: 444px; + margin-left: 0; +} + +table .span7 { + float: none; + width: 524px; + margin-left: 0; +} + +table .span8 { + float: none; + width: 604px; + margin-left: 0; +} + +table .span9 { + float: none; + width: 684px; + margin-left: 0; +} + +table .span10 { + float: none; + width: 764px; + margin-left: 0; +} + +table .span11 { + float: none; + width: 844px; + margin-left: 0; +} + +table .span12 { + float: none; + width: 924px; + margin-left: 0; +} + +table .span13 { + float: none; + width: 1004px; + margin-left: 0; +} + +table .span14 { + float: none; + width: 1084px; + margin-left: 0; +} + +table .span15 { + float: none; + width: 1164px; + margin-left: 0; +} + +table .span16 { + float: none; + width: 1244px; + margin-left: 0; +} + +table .span17 { + float: none; + width: 1324px; + margin-left: 0; +} + +table .span18 { + float: none; + width: 1404px; + margin-left: 0; +} + +table .span19 { + float: none; + width: 1484px; + margin-left: 0; +} + +table .span20 { + float: none; + width: 1564px; + margin-left: 0; +} + +table .span21 { + float: none; + width: 1644px; + margin-left: 0; +} + +table .span22 { + float: none; + width: 1724px; + margin-left: 0; +} + +table .span23 { + float: none; + width: 1804px; + margin-left: 0; +} + +table .span24 { + float: none; + width: 1884px; + margin-left: 0; +} + +[class^="icon-"], +[class*=" icon-"] { + display: inline-block; + width: 14px; + height: 14px; + *margin-right: .3em; + line-height: 14px; + vertical-align: text-top; + background-image: url("../img/glyphicons-halflings.png"); + background-position: 14px 14px; + background-repeat: no-repeat; +} + +[class^="icon-"]:last-child, +[class*=" icon-"]:last-child { + *margin-left: 0; +} + +.icon-white { + background-image: url("../img/glyphicons-halflings-white.png"); +} + +.icon-glass { + background-position: 0 0; +} + +.icon-music { + background-position: -24px 0; +} + +.icon-search { + background-position: -48px 0; +} + +.icon-envelope { + background-position: -72px 0; +} + +.icon-heart { + background-position: -96px 0; +} + +.icon-star { + background-position: -120px 0; +} + +.icon-star-empty { + background-position: -144px 0; +} + +.icon-user { + background-position: -168px 0; +} + +.icon-film { + background-position: -192px 0; +} + +.icon-th-large { + background-position: -216px 0; +} + +.icon-th { + background-position: -240px 0; +} + +.icon-th-list { + background-position: -264px 0; +} + +.icon-ok { + background-position: -288px 0; +} + +.icon-remove { + background-position: -312px 0; +} + +.icon-zoom-in { + background-position: -336px 0; +} + +.icon-zoom-out { + background-position: -360px 0; +} + +.icon-off { + background-position: -384px 0; +} + +.icon-signal { + background-position: -408px 0; +} + +.icon-cog { + background-position: -432px 0; +} + +.icon-trash { + background-position: -456px 0; +} + +.icon-home { + background-position: 0 -24px; +} + +.icon-file { + background-position: -24px -24px; +} + +.icon-time { + background-position: -48px -24px; +} + +.icon-road { + background-position: -72px -24px; +} + +.icon-download-alt { + background-position: -96px -24px; +} + +.icon-download { + background-position: -120px -24px; +} + +.icon-upload { + background-position: -144px -24px; +} + +.icon-inbox { + background-position: -168px -24px; +} + +.icon-play-circle { + background-position: -192px -24px; +} + +.icon-repeat { + background-position: -216px -24px; +} + +.icon-refresh { + background-position: -240px -24px; +} + +.icon-list-alt { + background-position: -264px -24px; +} + +.icon-lock { + background-position: -287px -24px; +} + +.icon-flag { + background-position: -312px -24px; +} + +.icon-headphones { + background-position: -336px -24px; +} + +.icon-volume-off { + background-position: -360px -24px; +} + +.icon-volume-down { + background-position: -384px -24px; +} + +.icon-volume-up { + background-position: -408px -24px; +} + +.icon-qrcode { + background-position: -432px -24px; +} + +.icon-barcode { + background-position: -456px -24px; +} + +.icon-tag { + background-position: 0 -48px; +} + +.icon-tags { + background-position: -25px -48px; +} + +.icon-book { + background-position: -48px -48px; +} + +.icon-bookmark { + background-position: -72px -48px; +} + +.icon-print { + background-position: -96px -48px; +} + +.icon-camera { + background-position: -120px -48px; +} + +.icon-font { + background-position: -144px -48px; +} + +.icon-bold { + background-position: -167px -48px; +} + +.icon-italic { + background-position: -192px -48px; +} + +.icon-text-height { + background-position: -216px -48px; +} + +.icon-text-width { + background-position: -240px -48px; +} + +.icon-align-left { + background-position: -264px -48px; +} + +.icon-align-center { + background-position: -288px -48px; +} + +.icon-align-right { + background-position: -312px -48px; +} + +.icon-align-justify { + background-position: -336px -48px; +} + +.icon-list { + background-position: -360px -48px; +} + +.icon-indent-left { + background-position: -384px -48px; +} + +.icon-indent-right { + background-position: -408px -48px; +} + +.icon-facetime-video { + background-position: -432px -48px; +} + +.icon-picture { + background-position: -456px -48px; +} + +.icon-pencil { + background-position: 0 -72px; +} + +.icon-map-marker { + background-position: -24px -72px; +} + +.icon-adjust { + background-position: -48px -72px; +} + +.icon-tint { + background-position: -72px -72px; +} + +.icon-edit { + background-position: -96px -72px; +} + +.icon-share { + background-position: -120px -72px; +} + +.icon-check { + background-position: -144px -72px; +} + +.icon-move { + background-position: -168px -72px; +} + +.icon-step-backward { + background-position: -192px -72px; +} + +.icon-fast-backward { + background-position: -216px -72px; +} + +.icon-backward { + background-position: -240px -72px; +} + +.icon-play { + background-position: -264px -72px; +} + +.icon-pause { + background-position: -288px -72px; +} + +.icon-stop { + background-position: -312px -72px; +} + +.icon-forward { + background-position: -336px -72px; +} + +.icon-fast-forward { + background-position: -360px -72px; +} + +.icon-step-forward { + background-position: -384px -72px; +} + +.icon-eject { + background-position: -408px -72px; +} + +.icon-chevron-left { + background-position: -432px -72px; +} + +.icon-chevron-right { + background-position: -456px -72px; +} + +.icon-plus-sign { + background-position: 0 -96px; +} + +.icon-minus-sign { + background-position: -24px -96px; +} + +.icon-remove-sign { + background-position: -48px -96px; +} + +.icon-ok-sign { + background-position: -72px -96px; +} + +.icon-question-sign { + background-position: -96px -96px; +} + +.icon-info-sign { + background-position: -120px -96px; +} + +.icon-screenshot { + background-position: -144px -96px; +} + +.icon-remove-circle { + background-position: -168px -96px; +} + +.icon-ok-circle { + background-position: -192px -96px; +} + +.icon-ban-circle { + background-position: -216px -96px; +} + +.icon-arrow-left { + background-position: -240px -96px; +} + +.icon-arrow-right { + background-position: -264px -96px; +} + +.icon-arrow-up { + background-position: -289px -96px; +} + +.icon-arrow-down { + background-position: -312px -96px; +} + +.icon-share-alt { + background-position: -336px -96px; +} + +.icon-resize-full { + background-position: -360px -96px; +} + +.icon-resize-small { + background-position: -384px -96px; +} + +.icon-plus { + background-position: -408px -96px; +} + +.icon-minus { + background-position: -433px -96px; +} + +.icon-asterisk { + background-position: -456px -96px; +} + +.icon-exclamation-sign { + background-position: 0 -120px; +} + +.icon-gift { + background-position: -24px -120px; +} + +.icon-leaf { + background-position: -48px -120px; +} + +.icon-fire { + background-position: -72px -120px; +} + +.icon-eye-open { + background-position: -96px -120px; +} + +.icon-eye-close { + background-position: -120px -120px; +} + +.icon-warning-sign { + background-position: -144px -120px; +} + +.icon-plane { + background-position: -168px -120px; +} + +.icon-calendar { + background-position: -192px -120px; +} + +.icon-random { + background-position: -216px -120px; +} + +.icon-comment { + background-position: -240px -120px; +} + +.icon-magnet { + background-position: -264px -120px; +} + +.icon-chevron-up { + background-position: -288px -120px; +} + +.icon-chevron-down { + background-position: -313px -119px; +} + +.icon-retweet { + background-position: -336px -120px; +} + +.icon-shopping-cart { + background-position: -360px -120px; +} + +.icon-folder-close { + background-position: -384px -120px; +} + +.icon-folder-open { + background-position: -408px -120px; +} + +.icon-resize-vertical { + background-position: -432px -119px; +} + +.icon-resize-horizontal { + background-position: -456px -118px; +} + +.icon-hdd { + background-position: 0 -144px; +} + +.icon-bullhorn { + background-position: -24px -144px; +} + +.icon-bell { + background-position: -48px -144px; +} + +.icon-certificate { + background-position: -72px -144px; +} + +.icon-thumbs-up { + background-position: -96px -144px; +} + +.icon-thumbs-down { + background-position: -120px -144px; +} + +.icon-hand-right { + background-position: -144px -144px; +} + +.icon-hand-left { + background-position: -168px -144px; +} + +.icon-hand-up { + background-position: -192px -144px; +} + +.icon-hand-down { + background-position: -216px -144px; +} + +.icon-circle-arrow-right { + background-position: -240px -144px; +} + +.icon-circle-arrow-left { + background-position: -264px -144px; +} + +.icon-circle-arrow-up { + background-position: -288px -144px; +} + +.icon-circle-arrow-down { + background-position: -312px -144px; +} + +.icon-globe { + background-position: -336px -144px; +} + +.icon-wrench { + background-position: -360px -144px; +} + +.icon-tasks { + background-position: -384px -144px; +} + +.icon-filter { + background-position: -408px -144px; +} + +.icon-briefcase { + background-position: -432px -144px; +} + +.icon-fullscreen { + background-position: -456px -144px; +} + +.dropup, +.dropdown { + position: relative; +} + +.dropdown-toggle { + *margin-bottom: -3px; +} + +.dropdown-toggle:active, +.open .dropdown-toggle { + outline: 0; +} + +.caret { + display: inline-block; + width: 0; + height: 0; + vertical-align: top; + border-top: 4px solid #000000; + border-right: 4px solid transparent; + border-left: 4px solid transparent; + content: ""; + opacity: 0.3; + filter: alpha(opacity=30); +} + +.dropdown .caret { + margin-top: 8px; + margin-left: 2px; +} + +.dropdown:hover .caret, +.open .caret { + opacity: 1; + filter: alpha(opacity=100); +} + +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + display: none; + float: left; + min-width: 160px; + padding: 4px 0; + margin: 1px 0 0; + list-style: none; + background-color: #ffffff; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.2); + *border-right-width: 2px; + *border-bottom-width: 2px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} + +.dropdown-menu.pull-right { + right: 0; + left: auto; +} + +.dropdown-menu .divider { + *width: 100%; + height: 1px; + margin: 8px 1px; + *margin: -5px 0 5px; + overflow: hidden; + background-color: #e5e5e5; + border-bottom: 1px solid #ffffff; +} + +.dropdown-menu a { + display: block; + padding: 3px 15px; + clear: both; + font-weight: normal; + line-height: 18px; + color: #333333; + white-space: nowrap; +} + +.dropdown-menu li > a:hover, +.dropdown-menu .active > a, +.dropdown-menu .active > a:hover { + color: #ffffff; + text-decoration: none; + background-color: #0088cc; +} + +.open { + *z-index: 1000; +} + +.open .dropdown-menu { + display: block; +} + +.pull-right .dropdown-menu { + right: 0; + left: auto; +} + +.dropup .caret, +.navbar-fixed-bottom .dropdown .caret { + border-top: 0; + border-bottom: 4px solid #000000; + content: "\2191"; +} + +.dropup .dropdown-menu, +.navbar-fixed-bottom .dropdown .dropdown-menu { + top: auto; + bottom: 100%; + margin-bottom: 1px; +} + +.typeahead { + margin-top: 2px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +.well { + min-height: 20px; + padding: 19px; + margin-bottom: 20px; + background-color: #f5f5f5; + border: 1px solid #eee; + border: 1px solid rgba(0, 0, 0, 0.05); + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); +} + +.well blockquote { + border-color: #ddd; + border-color: rgba(0, 0, 0, 0.15); +} + +.well-large { + padding: 24px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; +} + +.well-small { + padding: 9px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} + +.fade { + opacity: 0; + filter: alpha(opacity=0); + -webkit-transition: opacity 0.15s linear; + -moz-transition: opacity 0.15s linear; + -ms-transition: opacity 0.15s linear; + -o-transition: opacity 0.15s linear; + transition: opacity 0.15s linear; +} + +.fade.in { + opacity: 1; + filter: alpha(opacity=100); +} + +.collapse { + position: relative; + height: 0; + overflow: hidden; + -webkit-transition: height 0.35s ease; + -moz-transition: height 0.35s ease; + -ms-transition: height 0.35s ease; + -o-transition: height 0.35s ease; + transition: height 0.35s ease; +} + +.collapse.in { + height: auto; +} + +.close { + float: right; + font-size: 20px; + font-weight: bold; + line-height: 18px; + color: #000000; + text-shadow: 0 1px 0 #ffffff; + opacity: 0.2; + filter: alpha(opacity=20); +} + +.close:hover { + color: #000000; + text-decoration: none; + cursor: pointer; + opacity: 0.4; + filter: alpha(opacity=40); +} + +button.close { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; +} + +.btn { + display: inline-block; + *display: inline; + padding: 4px 10px 4px; + margin-bottom: 0; + *margin-left: .3em; + font-size: 13px; + line-height: 18px; + *line-height: 20px; + color: #333333; + text-align: center; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + vertical-align: middle; + cursor: pointer; + background-color: #f5f5f5; + *background-color: #e6e6e6; + background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); + background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); + background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); + background-image: linear-gradient(top, #ffffff, #e6e6e6); + background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); + background-repeat: repeat-x; + border: 1px solid #cccccc; + *border: 0; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + border-color: #e6e6e6 #e6e6e6 #bfbfbf; + border-bottom-color: #b3b3b3; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(enabled=false); + *zoom: 1; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); +} + +.btn:hover, +.btn:active, +.btn.active, +.btn.disabled, +.btn[disabled] { + background-color: #e6e6e6; + *background-color: #d9d9d9; +} + +.btn:active, +.btn.active { + background-color: #cccccc \9; +} + +.btn:first-child { + *margin-left: 0; +} + +.btn:hover { + color: #333333; + text-decoration: none; + background-color: #e6e6e6; + *background-color: #d9d9d9; + /* Buttons in IE7 don't get borders, so darken on hover */ + + background-position: 0 -15px; + -webkit-transition: background-position 0.1s linear; + -moz-transition: background-position 0.1s linear; + -ms-transition: background-position 0.1s linear; + -o-transition: background-position 0.1s linear; + transition: background-position 0.1s linear; +} + +.btn:focus { + outline: thin dotted #333; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} + +.btn.active, +.btn:active { + background-color: #e6e6e6; + background-color: #d9d9d9 \9; + background-image: none; + outline: 0; + -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); +} + +.btn.disabled, +.btn[disabled] { + cursor: default; + background-color: #e6e6e6; + background-image: none; + opacity: 0.65; + filter: alpha(opacity=65); + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} + +.btn-large { + padding: 9px 14px; + font-size: 15px; + line-height: normal; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} + +.btn-large [class^="icon-"] { + margin-top: 1px; +} + +.btn-small { + padding: 5px 9px; + font-size: 11px; + line-height: 16px; +} + +.btn-small [class^="icon-"] { + margin-top: -1px; +} + +.btn-mini { + padding: 2px 6px; + font-size: 11px; + line-height: 14px; +} + +.btn-primary, +.btn-primary:hover, +.btn-warning, +.btn-warning:hover, +.btn-danger, +.btn-danger:hover, +.btn-success, +.btn-success:hover, +.btn-info, +.btn-info:hover, +.btn-inverse, +.btn-inverse:hover { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); +} + +.btn-primary.active, +.btn-warning.active, +.btn-danger.active, +.btn-success.active, +.btn-info.active, +.btn-inverse.active { + color: rgba(255, 255, 255, 0.75); +} + +.btn { + border-color: #ccc; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +} + +.btn-primary { + background-color: #0074cc; + *background-color: #0055cc; + background-image: -ms-linear-gradient(top, #0088cc, #0055cc); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc)); + background-image: -webkit-linear-gradient(top, #0088cc, #0055cc); + background-image: -o-linear-gradient(top, #0088cc, #0055cc); + background-image: -moz-linear-gradient(top, #0088cc, #0055cc); + background-image: linear-gradient(top, #0088cc, #0055cc); + background-repeat: repeat-x; + border-color: #0055cc #0055cc #003580; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(enabled=false); +} + +.btn-primary:hover, +.btn-primary:active, +.btn-primary.active, +.btn-primary.disabled, +.btn-primary[disabled] { + background-color: #0055cc; + *background-color: #004ab3; +} + +.btn-primary:active, +.btn-primary.active { + background-color: #004099 \9; +} + +.btn-warning { + background-color: #faa732; + *background-color: #f89406; + background-image: -ms-linear-gradient(top, #fbb450, #f89406); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); + background-image: -webkit-linear-gradient(top, #fbb450, #f89406); + background-image: -o-linear-gradient(top, #fbb450, #f89406); + background-image: -moz-linear-gradient(top, #fbb450, #f89406); + background-image: linear-gradient(top, #fbb450, #f89406); + background-repeat: repeat-x; + border-color: #f89406 #f89406 #ad6704; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(enabled=false); +} + +.btn-warning:hover, +.btn-warning:active, +.btn-warning.active, +.btn-warning.disabled, +.btn-warning[disabled] { + background-color: #f89406; + *background-color: #df8505; +} + +.btn-warning:active, +.btn-warning.active { + background-color: #c67605 \9; +} + +.btn-danger { + background-color: #da4f49; + *background-color: #bd362f; + background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f)); + background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f); + background-image: -o-linear-gradient(top, #ee5f5b, #bd362f); + background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f); + background-image: linear-gradient(top, #ee5f5b, #bd362f); + background-repeat: repeat-x; + border-color: #bd362f #bd362f #802420; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(enabled=false); +} + +.btn-danger:hover, +.btn-danger:active, +.btn-danger.active, +.btn-danger.disabled, +.btn-danger[disabled] { + background-color: #bd362f; + *background-color: #a9302a; +} + +.btn-danger:active, +.btn-danger.active { + background-color: #942a25 \9; +} + +.btn-success { + background-color: #5bb75b; + *background-color: #51a351; + background-image: -ms-linear-gradient(top, #62c462, #51a351); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351)); + background-image: -webkit-linear-gradient(top, #62c462, #51a351); + background-image: -o-linear-gradient(top, #62c462, #51a351); + background-image: -moz-linear-gradient(top, #62c462, #51a351); + background-image: linear-gradient(top, #62c462, #51a351); + background-repeat: repeat-x; + border-color: #51a351 #51a351 #387038; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(enabled=false); +} + +.btn-success:hover, +.btn-success:active, +.btn-success.active, +.btn-success.disabled, +.btn-success[disabled] { + background-color: #51a351; + *background-color: #499249; +} + +.btn-success:active, +.btn-success.active { + background-color: #408140 \9; +} + +.btn-info { + background-color: #49afcd; + *background-color: #2f96b4; + background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4)); + background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4); + background-image: -o-linear-gradient(top, #5bc0de, #2f96b4); + background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4); + background-image: linear-gradient(top, #5bc0de, #2f96b4); + background-repeat: repeat-x; + border-color: #2f96b4 #2f96b4 #1f6377; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(enabled=false); +} + +.btn-info:hover, +.btn-info:active, +.btn-info.active, +.btn-info.disabled, +.btn-info[disabled] { + background-color: #2f96b4; + *background-color: #2a85a0; +} + +.btn-info:active, +.btn-info.active { + background-color: #24748c \9; +} + +.btn-inverse { + background-color: #414141; + *background-color: #222222; + background-image: -ms-linear-gradient(top, #555555, #222222); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#222222)); + background-image: -webkit-linear-gradient(top, #555555, #222222); + background-image: -o-linear-gradient(top, #555555, #222222); + background-image: -moz-linear-gradient(top, #555555, #222222); + background-image: linear-gradient(top, #555555, #222222); + background-repeat: repeat-x; + border-color: #222222 #222222 #000000; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#555555', endColorstr='#222222', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(enabled=false); +} + +.btn-inverse:hover, +.btn-inverse:active, +.btn-inverse.active, +.btn-inverse.disabled, +.btn-inverse[disabled] { + background-color: #222222; + *background-color: #151515; +} + +.btn-inverse:active, +.btn-inverse.active { + background-color: #080808 \9; +} + +button.btn, +input[type="submit"].btn { + *padding-top: 2px; + *padding-bottom: 2px; +} + +button.btn::-moz-focus-inner, +input[type="submit"].btn::-moz-focus-inner { + padding: 0; + border: 0; +} + +button.btn.btn-large, +input[type="submit"].btn.btn-large { + *padding-top: 7px; + *padding-bottom: 7px; +} + +button.btn.btn-small, +input[type="submit"].btn.btn-small { + *padding-top: 3px; + *padding-bottom: 3px; +} + +button.btn.btn-mini, +input[type="submit"].btn.btn-mini { + *padding-top: 1px; + *padding-bottom: 1px; +} + +.btn-group { + position: relative; + *margin-left: .3em; + *zoom: 1; +} + +.btn-group:before, +.btn-group:after { + display: table; + content: ""; +} + +.btn-group:after { + clear: both; +} + +.btn-group:first-child { + *margin-left: 0; +} + +.btn-group + .btn-group { + margin-left: 5px; +} + +.btn-toolbar { + margin-top: 9px; + margin-bottom: 9px; +} + +.btn-toolbar .btn-group { + display: inline-block; + *display: inline; + /* IE7 inline-block hack */ + + *zoom: 1; +} + +.btn-group > .btn { + position: relative; + float: left; + margin-left: -1px; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +.btn-group > .btn:first-child { + margin-left: 0; + -webkit-border-bottom-left-radius: 4px; + border-bottom-left-radius: 4px; + -webkit-border-top-left-radius: 4px; + border-top-left-radius: 4px; + -moz-border-radius-bottomleft: 4px; + -moz-border-radius-topleft: 4px; +} + +.btn-group > .btn:last-child, +.btn-group > .dropdown-toggle { + -webkit-border-top-right-radius: 4px; + border-top-right-radius: 4px; + -webkit-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; + -moz-border-radius-topright: 4px; + -moz-border-radius-bottomright: 4px; +} + +.btn-group > .btn.large:first-child { + margin-left: 0; + -webkit-border-bottom-left-radius: 6px; + border-bottom-left-radius: 6px; + -webkit-border-top-left-radius: 6px; + border-top-left-radius: 6px; + -moz-border-radius-bottomleft: 6px; + -moz-border-radius-topleft: 6px; +} + +.btn-group > .btn.large:last-child, +.btn-group > .large.dropdown-toggle { + -webkit-border-top-right-radius: 6px; + border-top-right-radius: 6px; + -webkit-border-bottom-right-radius: 6px; + border-bottom-right-radius: 6px; + -moz-border-radius-topright: 6px; + -moz-border-radius-bottomright: 6px; +} + +.btn-group > .btn:hover, +.btn-group > .btn:focus, +.btn-group > .btn:active, +.btn-group > .btn.active { + z-index: 2; +} + +.btn-group .dropdown-toggle:active, +.btn-group.open .dropdown-toggle { + outline: 0; +} + +.btn-group > .dropdown-toggle { + *padding-top: 4px; + padding-right: 8px; + *padding-bottom: 4px; + padding-left: 8px; + -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); +} + +.btn-group > .btn-mini.dropdown-toggle { + padding-right: 5px; + padding-left: 5px; +} + +.btn-group > .btn-small.dropdown-toggle { + *padding-top: 4px; + *padding-bottom: 4px; +} + +.btn-group > .btn-large.dropdown-toggle { + padding-right: 12px; + padding-left: 12px; +} + +.btn-group.open .dropdown-toggle { + background-image: none; + -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); +} + +.btn-group.open .btn.dropdown-toggle { + background-color: #e6e6e6; +} + +.btn-group.open .btn-primary.dropdown-toggle { + background-color: #0055cc; +} + +.btn-group.open .btn-warning.dropdown-toggle { + background-color: #f89406; +} + +.btn-group.open .btn-danger.dropdown-toggle { + background-color: #bd362f; +} + +.btn-group.open .btn-success.dropdown-toggle { + background-color: #51a351; +} + +.btn-group.open .btn-info.dropdown-toggle { + background-color: #2f96b4; +} + +.btn-group.open .btn-inverse.dropdown-toggle { + background-color: #222222; +} + +.btn .caret { + margin-top: 7px; + margin-left: 0; +} + +.btn:hover .caret, +.open.btn-group .caret { + opacity: 1; + filter: alpha(opacity=100); +} + +.btn-mini .caret { + margin-top: 5px; +} + +.btn-small .caret { + margin-top: 6px; +} + +.btn-large .caret { + margin-top: 6px; + border-top-width: 5px; + border-right-width: 5px; + border-left-width: 5px; +} + +.dropup .btn-large .caret { + border-top: 0; + border-bottom: 5px solid #000000; +} + +.btn-primary .caret, +.btn-warning .caret, +.btn-danger .caret, +.btn-info .caret, +.btn-success .caret, +.btn-inverse .caret { + border-top-color: #ffffff; + border-bottom-color: #ffffff; + opacity: 0.75; + filter: alpha(opacity=75); +} + +.alert { + padding: 8px 35px 8px 14px; + margin-bottom: 18px; + color: #c09853; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); + background-color: #fcf8e3; + border: 1px solid #fbeed5; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +.alert-heading { + color: inherit; +} + +.alert .close { + position: relative; + top: -2px; + right: -21px; + line-height: 18px; +} + +.alert-success { + color: #468847; + background-color: #dff0d8; + border-color: #d6e9c6; +} + +.alert-danger, +.alert-error { + color: #b94a48; + background-color: #f2dede; + border-color: #eed3d7; +} + +.alert-info { + color: #3a87ad; + background-color: #d9edf7; + border-color: #bce8f1; +} + +.alert-block { + padding-top: 14px; + padding-bottom: 14px; +} + +.alert-block > p, +.alert-block > ul { + margin-bottom: 0; +} + +.alert-block p + p { + margin-top: 5px; +} + +.nav { + margin-bottom: 18px; + margin-left: 0; + list-style: none; +} + +.nav > li > a { + display: block; +} + +.nav > li > a:hover { + text-decoration: none; + background-color: #eeeeee; +} + +.nav > .pull-right { + float: right; +} + +.nav .nav-header { + display: block; + padding: 3px 15px; + font-size: 11px; + font-weight: bold; + line-height: 18px; + color: #999999; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); + text-transform: uppercase; +} + +.nav li + .nav-header { + margin-top: 9px; +} + +.nav-list { + padding-right: 15px; + padding-left: 15px; + margin-bottom: 0; +} + +.nav-list > li > a, +.nav-list .nav-header { + margin-right: -15px; + margin-left: -15px; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); +} + +.nav-list > li > a { + padding: 3px 15px; +} + +.nav-list > .active > a, +.nav-list > .active > a:hover { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); + background-color: #0088cc; +} + +.nav-list [class^="icon-"] { + margin-right: 2px; +} + +.nav-list .divider { + *width: 100%; + height: 1px; + margin: 8px 1px; + *margin: -5px 0 5px; + overflow: hidden; + background-color: #e5e5e5; + border-bottom: 1px solid #ffffff; +} + +.nav-tabs, +.nav-pills { + *zoom: 1; +} + +.nav-tabs:before, +.nav-pills:before, +.nav-tabs:after, +.nav-pills:after { + display: table; + content: ""; +} + +.nav-tabs:after, +.nav-pills:after { + clear: both; +} + +.nav-tabs > li, +.nav-pills > li { + float: left; +} + +.nav-tabs > li > a, +.nav-pills > li > a { + padding-right: 12px; + padding-left: 12px; + margin-right: 2px; + line-height: 14px; +} + +.nav-tabs { + border-bottom: 1px solid #ddd; +} + +.nav-tabs > li { + margin-bottom: -1px; +} + +.nav-tabs > li > a { + padding-top: 8px; + padding-bottom: 8px; + line-height: 18px; + border: 1px solid transparent; + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; +} + +.nav-tabs > li > a:hover { + border-color: #eeeeee #eeeeee #dddddd; +} + +.nav-tabs > .active > a, +.nav-tabs > .active > a:hover { + color: #555555; + cursor: default; + background-color: #ffffff; + border: 1px solid #ddd; + border-bottom-color: transparent; +} + +.nav-pills > li > a { + padding-top: 8px; + padding-bottom: 8px; + margin-top: 2px; + margin-bottom: 2px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} + +.nav-pills > .active > a, +.nav-pills > .active > a:hover { + color: #ffffff; + background-color: #0088cc; +} + +.nav-stacked > li { + float: none; +} + +.nav-stacked > li > a { + margin-right: 0; +} + +.nav-tabs.nav-stacked { + border-bottom: 0; +} + +.nav-tabs.nav-stacked > li > a { + border: 1px solid #ddd; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +.nav-tabs.nav-stacked > li:first-child > a { + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; +} + +.nav-tabs.nav-stacked > li:last-child > a { + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; +} + +.nav-tabs.nav-stacked > li > a:hover { + z-index: 2; + border-color: #ddd; +} + +.nav-pills.nav-stacked > li > a { + margin-bottom: 3px; +} + +.nav-pills.nav-stacked > li:last-child > a { + margin-bottom: 1px; +} + +.nav-tabs .dropdown-menu { + -webkit-border-radius: 0 0 5px 5px; + -moz-border-radius: 0 0 5px 5px; + border-radius: 0 0 5px 5px; +} + +.nav-pills .dropdown-menu { + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +.nav-tabs .dropdown-toggle .caret, +.nav-pills .dropdown-toggle .caret { + margin-top: 6px; + border-top-color: #0088cc; + border-bottom-color: #0088cc; +} + +.nav-tabs .dropdown-toggle:hover .caret, +.nav-pills .dropdown-toggle:hover .caret { + border-top-color: #005580; + border-bottom-color: #005580; +} + +.nav-tabs .active .dropdown-toggle .caret, +.nav-pills .active .dropdown-toggle .caret { + border-top-color: #333333; + border-bottom-color: #333333; +} + +.nav > .dropdown.active > a:hover { + color: #000000; + cursor: pointer; +} + +.nav-tabs .open .dropdown-toggle, +.nav-pills .open .dropdown-toggle, +.nav > li.dropdown.open.active > a:hover { + color: #ffffff; + background-color: #999999; + border-color: #999999; +} + +.nav li.dropdown.open .caret, +.nav li.dropdown.open.active .caret, +.nav li.dropdown.open a:hover .caret { + border-top-color: #ffffff; + border-bottom-color: #ffffff; + opacity: 1; + filter: alpha(opacity=100); +} + +.tabs-stacked .open > a:hover { + border-color: #999999; +} + +.tabbable { + *zoom: 1; +} + +.tabbable:before, +.tabbable:after { + display: table; + content: ""; +} + +.tabbable:after { + clear: both; +} + +.tab-content { + overflow: auto; +} + +.tabs-below > .nav-tabs, +.tabs-right > .nav-tabs, +.tabs-left > .nav-tabs { + border-bottom: 0; +} + +.tab-content > .tab-pane, +.pill-content > .pill-pane { + display: none; +} + +.tab-content > .active, +.pill-content > .active { + display: block; +} + +.tabs-below > .nav-tabs { + border-top: 1px solid #ddd; +} + +.tabs-below > .nav-tabs > li { + margin-top: -1px; + margin-bottom: 0; +} + +.tabs-below > .nav-tabs > li > a { + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; +} + +.tabs-below > .nav-tabs > li > a:hover { + border-top-color: #ddd; + border-bottom-color: transparent; +} + +.tabs-below > .nav-tabs > .active > a, +.tabs-below > .nav-tabs > .active > a:hover { + border-color: transparent #ddd #ddd #ddd; +} + +.tabs-left > .nav-tabs > li, +.tabs-right > .nav-tabs > li { + float: none; +} + +.tabs-left > .nav-tabs > li > a, +.tabs-right > .nav-tabs > li > a { + min-width: 74px; + margin-right: 0; + margin-bottom: 3px; +} + +.tabs-left > .nav-tabs { + float: left; + margin-right: 19px; + border-right: 1px solid #ddd; +} + +.tabs-left > .nav-tabs > li > a { + margin-right: -1px; + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; +} + +.tabs-left > .nav-tabs > li > a:hover { + border-color: #eeeeee #dddddd #eeeeee #eeeeee; +} + +.tabs-left > .nav-tabs .active > a, +.tabs-left > .nav-tabs .active > a:hover { + border-color: #ddd transparent #ddd #ddd; + *border-right-color: #ffffff; +} + +.tabs-right > .nav-tabs { + float: right; + margin-left: 19px; + border-left: 1px solid #ddd; +} + +.tabs-right > .nav-tabs > li > a { + margin-left: -1px; + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; +} + +.tabs-right > .nav-tabs > li > a:hover { + border-color: #eeeeee #eeeeee #eeeeee #dddddd; +} + +.tabs-right > .nav-tabs .active > a, +.tabs-right > .nav-tabs .active > a:hover { + border-color: #ddd #ddd #ddd transparent; + *border-left-color: #ffffff; +} + +.navbar { + *position: relative; + *z-index: 2; + margin-bottom: 18px; + overflow: visible; +} + +.navbar-inner { + min-height: 40px; + padding-right: 20px; + padding-left: 20px; + background-color: #2c2c2c; + background-image: -moz-linear-gradient(top, #333333, #222222); + background-image: -ms-linear-gradient(top, #333333, #222222); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222)); + background-image: -webkit-linear-gradient(top, #333333, #222222); + background-image: -o-linear-gradient(top, #333333, #222222); + background-image: linear-gradient(top, #333333, #222222); + background-repeat: repeat-x; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0); + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); +} + +.navbar .container { + width: auto; +} + +.nav-collapse.collapse { + height: auto; +} + +.navbar { + color: #999999; +} + +.navbar .brand:hover { + text-decoration: none; +} + +.navbar .brand { + display: block; + float: left; + padding: 8px 20px 12px; + margin-left: -20px; + font-size: 20px; + font-weight: 200; + line-height: 1; + color: #999999; +} + +.navbar .navbar-text { + margin-bottom: 0; + line-height: 40px; +} + +.navbar .navbar-link { + color: #999999; +} + +.navbar .navbar-link:hover { + color: #ffffff; +} + +.navbar .btn, +.navbar .btn-group { + margin-top: 5px; +} + +.navbar .btn-group .btn { + margin: 0; +} + +.navbar-form { + margin-bottom: 0; + *zoom: 1; +} + +.navbar-form:before, +.navbar-form:after { + display: table; + content: ""; +} + +.navbar-form:after { + clear: both; +} + +.navbar-form input, +.navbar-form select, +.navbar-form .radio, +.navbar-form .checkbox { + margin-top: 5px; +} + +.navbar-form input, +.navbar-form select { + display: inline-block; + margin-bottom: 0; +} + +.navbar-form input[type="image"], +.navbar-form input[type="checkbox"], +.navbar-form input[type="radio"] { + margin-top: 3px; +} + +.navbar-form .input-append, +.navbar-form .input-prepend { + margin-top: 6px; + white-space: nowrap; +} + +.navbar-form .input-append input, +.navbar-form .input-prepend input { + margin-top: 0; +} + +.navbar-search { + position: relative; + float: left; + margin-top: 6px; + margin-bottom: 0; +} + +.navbar-search .search-query { + padding: 4px 9px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 13px; + font-weight: normal; + line-height: 1; + color: #ffffff; + background-color: #626262; + border: 1px solid #151515; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); + -webkit-transition: none; + -moz-transition: none; + -ms-transition: none; + -o-transition: none; + transition: none; +} + +.navbar-search .search-query:-moz-placeholder { + color: #cccccc; +} + +.navbar-search .search-query::-webkit-input-placeholder { + color: #cccccc; +} + +.navbar-search .search-query:focus, +.navbar-search .search-query.focused { + padding: 5px 10px; + color: #333333; + text-shadow: 0 1px 0 #ffffff; + background-color: #ffffff; + border: 0; + outline: 0; + -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); + -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); + box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); +} + +.navbar-fixed-top, +.navbar-fixed-bottom { + position: fixed; + right: 0; + left: 0; + z-index: 1030; + margin-bottom: 0; +} + +.navbar-fixed-top .navbar-inner, +.navbar-fixed-bottom .navbar-inner { + padding-right: 0; + padding-left: 0; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +.navbar-fixed-top .container, +.navbar-fixed-bottom .container { + width: 940px; +} + +.navbar-fixed-top { + top: 0; +} + +.navbar-fixed-bottom { + bottom: 0; +} + +.navbar .nav { + position: relative; + left: 0; + display: block; + float: left; + margin: 0 10px 0 0; +} + +.navbar .nav.pull-right { + float: right; +} + +.navbar .nav > li { + display: block; + float: left; +} + +.navbar .nav > li > a { + float: none; + padding: 9px 10px 11px; + line-height: 19px; + color: #999999; + text-decoration: none; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); +} + +.navbar .btn { + display: inline-block; + padding: 4px 10px 4px; + margin: 5px 5px 6px; + line-height: 18px; +} + +.navbar .btn-group { + padding: 5px 5px 6px; + margin: 0; +} + +.navbar .nav > li > a:hover { + color: #ffffff; + text-decoration: none; + background-color: transparent; +} + +.navbar .nav .active > a, +.navbar .nav .active > a:hover { + color: #ffffff; + text-decoration: none; + background-color: #222222; +} + +.navbar .divider-vertical { + width: 1px; + height: 40px; + margin: 0 9px; + overflow: hidden; + background-color: #222222; + border-right: 1px solid #333333; +} + +.navbar .nav.pull-right { + margin-right: 0; + margin-left: 10px; +} + +.navbar .btn-navbar { + display: none; + float: right; + padding: 7px 10px; + margin-right: 5px; + margin-left: 5px; + background-color: #2c2c2c; + *background-color: #222222; + background-image: -ms-linear-gradient(top, #333333, #222222); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222)); + background-image: -webkit-linear-gradient(top, #333333, #222222); + background-image: -o-linear-gradient(top, #333333, #222222); + background-image: linear-gradient(top, #333333, #222222); + background-image: -moz-linear-gradient(top, #333333, #222222); + background-repeat: repeat-x; + border-color: #222222 #222222 #000000; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(enabled=false); + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); +} + +.navbar .btn-navbar:hover, +.navbar .btn-navbar:active, +.navbar .btn-navbar.active, +.navbar .btn-navbar.disabled, +.navbar .btn-navbar[disabled] { + background-color: #222222; + *background-color: #151515; +} + +.navbar .btn-navbar:active, +.navbar .btn-navbar.active { + background-color: #080808 \9; +} + +.navbar .btn-navbar .icon-bar { + display: block; + width: 18px; + height: 2px; + background-color: #f5f5f5; + -webkit-border-radius: 1px; + -moz-border-radius: 1px; + border-radius: 1px; + -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); +} + +.btn-navbar .icon-bar + .icon-bar { + margin-top: 3px; +} + +.navbar .dropdown-menu:before { + position: absolute; + top: -7px; + left: 9px; + display: inline-block; + border-right: 7px solid transparent; + border-bottom: 7px solid #ccc; + border-left: 7px solid transparent; + border-bottom-color: rgba(0, 0, 0, 0.2); + content: ''; +} + +.navbar .dropdown-menu:after { + position: absolute; + top: -6px; + left: 10px; + display: inline-block; + border-right: 6px solid transparent; + border-bottom: 6px solid #ffffff; + border-left: 6px solid transparent; + content: ''; +} + +.navbar-fixed-bottom .dropdown-menu:before { + top: auto; + bottom: -7px; + border-top: 7px solid #ccc; + border-bottom: 0; + border-top-color: rgba(0, 0, 0, 0.2); +} + +.navbar-fixed-bottom .dropdown-menu:after { + top: auto; + bottom: -6px; + border-top: 6px solid #ffffff; + border-bottom: 0; +} + +.navbar .nav li.dropdown .dropdown-toggle .caret, +.navbar .nav li.dropdown.open .caret { + border-top-color: #ffffff; + border-bottom-color: #ffffff; +} + +.navbar .nav li.dropdown.active .caret { + opacity: 1; + filter: alpha(opacity=100); +} + +.navbar .nav li.dropdown.open > .dropdown-toggle, +.navbar .nav li.dropdown.active > .dropdown-toggle, +.navbar .nav li.dropdown.open.active > .dropdown-toggle { + background-color: transparent; +} + +.navbar .nav li.dropdown.active > .dropdown-toggle:hover { + color: #ffffff; +} + +.navbar .pull-right .dropdown-menu, +.navbar .dropdown-menu.pull-right { + right: 0; + left: auto; +} + +.navbar .pull-right .dropdown-menu:before, +.navbar .dropdown-menu.pull-right:before { + right: 12px; + left: auto; +} + +.navbar .pull-right .dropdown-menu:after, +.navbar .dropdown-menu.pull-right:after { + right: 13px; + left: auto; +} + +.breadcrumb { + padding: 7px 14px; + margin: 0 0 18px; + list-style: none; + background-color: #fbfbfb; + background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5); + background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f5f5f5)); + background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5); + background-image: -o-linear-gradient(top, #ffffff, #f5f5f5); + background-image: linear-gradient(top, #ffffff, #f5f5f5); + background-repeat: repeat-x; + border: 1px solid #ddd; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0); + -webkit-box-shadow: inset 0 1px 0 #ffffff; + -moz-box-shadow: inset 0 1px 0 #ffffff; + box-shadow: inset 0 1px 0 #ffffff; +} + +.breadcrumb li { + display: inline-block; + *display: inline; + text-shadow: 0 1px 0 #ffffff; + *zoom: 1; +} + +.breadcrumb .divider { + padding: 0 5px; + color: #999999; +} + +.breadcrumb .active a { + color: #333333; +} + +.pagination { + height: 36px; + margin: 18px 0; +} + +.pagination ul { + display: inline-block; + *display: inline; + margin-bottom: 0; + margin-left: 0; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + *zoom: 1; + -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); +} + +.pagination li { + display: inline; +} + +.pagination a { + float: left; + padding: 0 14px; + line-height: 34px; + text-decoration: none; + border: 1px solid #ddd; + border-left-width: 0; +} + +.pagination a:hover, +.pagination .active a { + background-color: #f5f5f5; +} + +.pagination .active a { + color: #999999; + cursor: default; +} + +.pagination .disabled span, +.pagination .disabled a, +.pagination .disabled a:hover { + color: #999999; + cursor: default; + background-color: transparent; +} + +.pagination li:first-child a { + border-left-width: 1px; + -webkit-border-radius: 3px 0 0 3px; + -moz-border-radius: 3px 0 0 3px; + border-radius: 3px 0 0 3px; +} + +.pagination li:last-child a { + -webkit-border-radius: 0 3px 3px 0; + -moz-border-radius: 0 3px 3px 0; + border-radius: 0 3px 3px 0; +} + +.pagination-centered { + text-align: center; +} + +.pagination-right { + text-align: right; +} + +.pager { + margin-bottom: 18px; + margin-left: 0; + text-align: center; + list-style: none; + *zoom: 1; +} + +.pager:before, +.pager:after { + display: table; + content: ""; +} + +.pager:after { + clear: both; +} + +.pager li { + display: inline; +} + +.pager a { + display: inline-block; + padding: 5px 14px; + background-color: #fff; + border: 1px solid #ddd; + -webkit-border-radius: 15px; + -moz-border-radius: 15px; + border-radius: 15px; +} + +.pager a:hover { + text-decoration: none; + background-color: #f5f5f5; +} + +.pager .next a { + float: right; +} + +.pager .previous a { + float: left; +} + +.pager .disabled a, +.pager .disabled a:hover { + color: #999999; + cursor: default; + background-color: #fff; +} + +.modal-open .dropdown-menu { + z-index: 2050; +} + +.modal-open .dropdown.open { + *z-index: 2050; +} + +.modal-open .popover { + z-index: 2060; +} + +.modal-open .tooltip { + z-index: 2070; +} + +.modal-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1040; + background-color: #000000; +} + +.modal-backdrop.fade { + opacity: 0; +} + +.modal-backdrop, +.modal-backdrop.fade.in { + opacity: 0.8; + filter: alpha(opacity=80); +} + +.modal { + position: fixed; + top: 50%; + left: 50%; + z-index: 1050; + width: 560px; + margin: -250px 0 0 -280px; + overflow: auto; + background-color: #ffffff; + border: 1px solid #999; + border: 1px solid rgba(0, 0, 0, 0.3); + *border: 1px solid #999; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); + box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); + -webkit-background-clip: padding-box; + -moz-background-clip: padding-box; + background-clip: padding-box; +} + +.modal.fade { + top: -25%; + -webkit-transition: opacity 0.3s linear, top 0.3s ease-out; + -moz-transition: opacity 0.3s linear, top 0.3s ease-out; + -ms-transition: opacity 0.3s linear, top 0.3s ease-out; + -o-transition: opacity 0.3s linear, top 0.3s ease-out; + transition: opacity 0.3s linear, top 0.3s ease-out; +} + +.modal.fade.in { + top: 50%; +} + +.modal-header { + padding: 9px 15px; + border-bottom: 1px solid #eee; +} + +.modal-header .close { + margin-top: 2px; +} + +.modal-body { + max-height: 400px; + padding: 15px; + overflow-y: auto; +} + +.modal-form { + margin-bottom: 0; +} + +.modal-footer { + padding: 14px 15px 15px; + margin-bottom: 0; + text-align: right; + background-color: #f5f5f5; + border-top: 1px solid #ddd; + -webkit-border-radius: 0 0 6px 6px; + -moz-border-radius: 0 0 6px 6px; + border-radius: 0 0 6px 6px; + *zoom: 1; + -webkit-box-shadow: inset 0 1px 0 #ffffff; + -moz-box-shadow: inset 0 1px 0 #ffffff; + box-shadow: inset 0 1px 0 #ffffff; +} + +.modal-footer:before, +.modal-footer:after { + display: table; + content: ""; +} + +.modal-footer:after { + clear: both; +} + +.modal-footer .btn + .btn { + margin-bottom: 0; + margin-left: 5px; +} + +.modal-footer .btn-group .btn + .btn { + margin-left: -1px; +} + +.tooltip { + position: absolute; + z-index: 1020; + display: block; + padding: 5px; + font-size: 11px; + opacity: 0; + filter: alpha(opacity=0); + visibility: visible; +} + +.tooltip.in { + opacity: 0.8; + filter: alpha(opacity=80); +} + +.tooltip.top { + margin-top: -2px; +} + +.tooltip.right { + margin-left: 2px; +} + +.tooltip.bottom { + margin-top: 2px; +} + +.tooltip.left { + margin-left: -2px; +} + +.tooltip.top .tooltip-arrow { + bottom: 0; + left: 50%; + margin-left: -5px; + border-top: 5px solid #000000; + border-right: 5px solid transparent; + border-left: 5px solid transparent; +} + +.tooltip.left .tooltip-arrow { + top: 50%; + right: 0; + margin-top: -5px; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 5px solid #000000; +} + +.tooltip.bottom .tooltip-arrow { + top: 0; + left: 50%; + margin-left: -5px; + border-right: 5px solid transparent; + border-bottom: 5px solid #000000; + border-left: 5px solid transparent; +} + +.tooltip.right .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -5px; + border-top: 5px solid transparent; + border-right: 5px solid #000000; + border-bottom: 5px solid transparent; +} + +.tooltip-inner { + max-width: 200px; + padding: 3px 8px; + color: #ffffff; + text-align: center; + text-decoration: none; + background-color: #000000; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +.tooltip-arrow { + position: absolute; + width: 0; + height: 0; +} + +.popover { + position: absolute; + top: 0; + left: 0; + z-index: 1010; + display: none; + padding: 5px; +} + +.popover.top { + margin-top: -5px; +} + +.popover.right { + margin-left: 5px; +} + +.popover.bottom { + margin-top: 5px; +} + +.popover.left { + margin-left: -5px; +} + +.popover.top .arrow { + bottom: 0; + left: 50%; + margin-left: -5px; + border-top: 5px solid #000000; + border-right: 5px solid transparent; + border-left: 5px solid transparent; +} + +.popover.right .arrow { + top: 50%; + left: 0; + margin-top: -5px; + border-top: 5px solid transparent; + border-right: 5px solid #000000; + border-bottom: 5px solid transparent; +} + +.popover.bottom .arrow { + top: 0; + left: 50%; + margin-left: -5px; + border-right: 5px solid transparent; + border-bottom: 5px solid #000000; + border-left: 5px solid transparent; +} + +.popover.left .arrow { + top: 50%; + right: 0; + margin-top: -5px; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 5px solid #000000; +} + +.popover .arrow { + position: absolute; + width: 0; + height: 0; +} + +.popover-inner { + width: 280px; + padding: 3px; + overflow: hidden; + background: #000000; + background: rgba(0, 0, 0, 0.8); + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); + box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); +} + +.popover-title { + padding: 9px 15px; + line-height: 1; + background-color: #f5f5f5; + border-bottom: 1px solid #eee; + -webkit-border-radius: 3px 3px 0 0; + -moz-border-radius: 3px 3px 0 0; + border-radius: 3px 3px 0 0; +} + +.popover-content { + padding: 14px; + background-color: #ffffff; + -webkit-border-radius: 0 0 3px 3px; + -moz-border-radius: 0 0 3px 3px; + border-radius: 0 0 3px 3px; + -webkit-background-clip: padding-box; + -moz-background-clip: padding-box; + background-clip: padding-box; +} + +.popover-content p, +.popover-content ul, +.popover-content ol { + margin-bottom: 0; +} + +.thumbnails { + margin-left: -20px; + list-style: none; + *zoom: 1; +} + +.thumbnails:before, +.thumbnails:after { + display: table; + content: ""; +} + +.thumbnails:after { + clear: both; +} + +.row-fluid .thumbnails { + margin-left: 0; +} + +.thumbnails > li { + float: left; + margin-bottom: 18px; + margin-left: 20px; +} + +.thumbnail { + display: block; + padding: 4px; + line-height: 1; + border: 1px solid #ddd; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); +} + +a.thumbnail:hover { + border-color: #0088cc; + -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); + -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); + box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); +} + +.thumbnail > img { + display: block; + max-width: 100%; + margin-right: auto; + margin-left: auto; +} + +.thumbnail .caption { + padding: 9px; +} + +.label, +.badge { + font-size: 10.998px; + font-weight: bold; + line-height: 14px; + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + white-space: nowrap; + vertical-align: baseline; + background-color: #999999; +} + +.label { + padding: 1px 4px 2px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} + +.badge { + padding: 1px 9px 2px; + -webkit-border-radius: 9px; + -moz-border-radius: 9px; + border-radius: 9px; +} + +a.label:hover, +a.badge:hover { + color: #ffffff; + text-decoration: none; + cursor: pointer; +} + +.label-important, +.badge-important { + background-color: #b94a48; +} + +.label-important[href], +.badge-important[href] { + background-color: #953b39; +} + +.label-warning, +.badge-warning { + background-color: #f89406; +} + +.label-warning[href], +.badge-warning[href] { + background-color: #c67605; +} + +.label-success, +.badge-success { + background-color: #468847; +} + +.label-success[href], +.badge-success[href] { + background-color: #356635; +} + +.label-info, +.badge-info { + background-color: #3a87ad; +} + +.label-info[href], +.badge-info[href] { + background-color: #2d6987; +} + +.label-inverse, +.badge-inverse { + background-color: #333333; +} + +.label-inverse[href], +.badge-inverse[href] { + background-color: #1a1a1a; +} + +@-webkit-keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } + to { + background-position: 0 0; + } +} + +@-moz-keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } + to { + background-position: 0 0; + } +} + +@-ms-keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } + to { + background-position: 0 0; + } +} + +@-o-keyframes progress-bar-stripes { + from { + background-position: 0 0; + } + to { + background-position: 40px 0; + } +} + +@keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } + to { + background-position: 0 0; + } +} + +.progress { + height: 18px; + margin-bottom: 18px; + overflow: hidden; + background-color: #f7f7f7; + background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9); + background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9)); + background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9); + background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9); + background-image: linear-gradient(top, #f5f5f5, #f9f9f9); + background-repeat: repeat-x; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0); + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.progress .bar { + width: 0; + height: 18px; + font-size: 12px; + color: #ffffff; + text-align: center; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + background-color: #0e90d2; + background-image: -moz-linear-gradient(top, #149bdf, #0480be); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be)); + background-image: -webkit-linear-gradient(top, #149bdf, #0480be); + background-image: -o-linear-gradient(top, #149bdf, #0480be); + background-image: linear-gradient(top, #149bdf, #0480be); + background-image: -ms-linear-gradient(top, #149bdf, #0480be); + background-repeat: repeat-x; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0); + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: width 0.6s ease; + -moz-transition: width 0.6s ease; + -ms-transition: width 0.6s ease; + -o-transition: width 0.6s ease; + transition: width 0.6s ease; +} + +.progress-striped .bar { + background-color: #149bdf; + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + -webkit-background-size: 40px 40px; + -moz-background-size: 40px 40px; + -o-background-size: 40px 40px; + background-size: 40px 40px; +} + +.progress.active .bar { + -webkit-animation: progress-bar-stripes 2s linear infinite; + -moz-animation: progress-bar-stripes 2s linear infinite; + -ms-animation: progress-bar-stripes 2s linear infinite; + -o-animation: progress-bar-stripes 2s linear infinite; + animation: progress-bar-stripes 2s linear infinite; +} + +.progress-danger .bar { + background-color: #dd514c; + background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); + background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35)); + background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35); + background-image: -o-linear-gradient(top, #ee5f5b, #c43c35); + background-image: linear-gradient(top, #ee5f5b, #c43c35); + background-repeat: repeat-x; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0); +} + +.progress-danger.progress-striped .bar { + background-color: #ee5f5b; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} + +.progress-success .bar { + background-color: #5eb95e; + background-image: -moz-linear-gradient(top, #62c462, #57a957); + background-image: -ms-linear-gradient(top, #62c462, #57a957); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957)); + background-image: -webkit-linear-gradient(top, #62c462, #57a957); + background-image: -o-linear-gradient(top, #62c462, #57a957); + background-image: linear-gradient(top, #62c462, #57a957); + background-repeat: repeat-x; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); +} + +.progress-success.progress-striped .bar { + background-color: #62c462; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} + +.progress-info .bar { + background-color: #4bb1cf; + background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); + background-image: -ms-linear-gradient(top, #5bc0de, #339bb9); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9)); + background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); + background-image: -o-linear-gradient(top, #5bc0de, #339bb9); + background-image: linear-gradient(top, #5bc0de, #339bb9); + background-repeat: repeat-x; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0); +} + +.progress-info.progress-striped .bar { + background-color: #5bc0de; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} + +.progress-warning .bar { + background-color: #faa732; + background-image: -moz-linear-gradient(top, #fbb450, #f89406); + background-image: -ms-linear-gradient(top, #fbb450, #f89406); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); + background-image: -webkit-linear-gradient(top, #fbb450, #f89406); + background-image: -o-linear-gradient(top, #fbb450, #f89406); + background-image: linear-gradient(top, #fbb450, #f89406); + background-repeat: repeat-x; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0); +} + +.progress-warning.progress-striped .bar { + background-color: #fbb450; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} + +.accordion { + margin-bottom: 18px; +} + +.accordion-group { + margin-bottom: 2px; + border: 1px solid #e5e5e5; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +.accordion-heading { + border-bottom: 0; +} + +.accordion-heading .accordion-toggle { + display: block; + padding: 8px 15px; +} + +.accordion-toggle { + cursor: pointer; +} + +.accordion-inner { + padding: 9px 15px; + border-top: 1px solid #e5e5e5; +} + +.carousel { + position: relative; + margin-bottom: 18px; + line-height: 1; +} + +.carousel-inner { + position: relative; + width: 100%; + overflow: hidden; +} + +.carousel .item { + position: relative; + display: none; + -webkit-transition: 0.6s ease-in-out left; + -moz-transition: 0.6s ease-in-out left; + -ms-transition: 0.6s ease-in-out left; + -o-transition: 0.6s ease-in-out left; + transition: 0.6s ease-in-out left; +} + +.carousel .item > img { + display: block; + line-height: 1; +} + +.carousel .active, +.carousel .next, +.carousel .prev { + display: block; +} + +.carousel .active { + left: 0; +} + +.carousel .next, +.carousel .prev { + position: absolute; + top: 0; + width: 100%; +} + +.carousel .next { + left: 100%; +} + +.carousel .prev { + left: -100%; +} + +.carousel .next.left, +.carousel .prev.right { + left: 0; +} + +.carousel .active.left { + left: -100%; +} + +.carousel .active.right { + left: 100%; +} + +.carousel-control { + position: absolute; + top: 40%; + left: 15px; + width: 40px; + height: 40px; + margin-top: -20px; + font-size: 60px; + font-weight: 100; + line-height: 30px; + color: #ffffff; + text-align: center; + background: #222222; + border: 3px solid #ffffff; + -webkit-border-radius: 23px; + -moz-border-radius: 23px; + border-radius: 23px; + opacity: 0.5; + filter: alpha(opacity=50); +} + +.carousel-control.right { + right: 15px; + left: auto; +} + +.carousel-control:hover { + color: #ffffff; + text-decoration: none; + opacity: 0.9; + filter: alpha(opacity=90); +} + +.carousel-caption { + position: absolute; + right: 0; + bottom: 0; + left: 0; + padding: 10px 15px 5px; + background: #333333; + background: rgba(0, 0, 0, 0.75); +} + +.carousel-caption h4, +.carousel-caption p { + color: #ffffff; +} + +.hero-unit { + padding: 60px; + margin-bottom: 30px; + background-color: #eeeeee; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; +} + +.hero-unit h1 { + margin-bottom: 0; + font-size: 60px; + line-height: 1; + letter-spacing: -1px; + color: inherit; +} + +.hero-unit p { + font-size: 18px; + font-weight: 200; + line-height: 27px; + color: inherit; +} + +.pull-right { + float: right; +} + +.pull-left { + float: left; +} + +.hide { + display: none; +} + +.show { + display: block; +} + +.invisible { + visibility: hidden; +} diff --git a/portal/src/main/webapp/extsys/vim/css/skill.css b/portal/src/main/webapp/extsys/vim/css/skill.css new file mode 100644 index 0000000..929dde6 --- /dev/null +++ b/portal/src/main/webapp/extsys/vim/css/skill.css @@ -0,0 +1,97 @@ +/** + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ +body { + font-family: 'Open Sans', sans-serif; + /*background-color: #f1f3fa;*/ + width: '100%'; + height: '100%'; + margin-top: 10px; +} + +div.skills-sunburst { + font-size: 12px; + font-weight: 400; + text-align: center; +} + +#skillmap .skills-wrapper { + margin-top: 10px; + overflow: auto; +} + +#skillmap .skills-sunburst { + float: left; + width: 500px; + margin-left: -80px; +} + +#skillmap .skills-sunburst svg { + font: 11px 'Source Sans Pro', sans-serif; + font-weight: 900; + + cursor: pointer; +} + +#skillmap .skills-chart { + float: right; + font-family: 'Source Sans Pro', sans-serif; + font-size: 15px; + margin: 80px 20px 0 0; +} + +#skillmap .skills-chart .breadcumb-text { + font-size: 13px; + font-weight: 700; +} + +#skillmap .skills-chart #skills-chart-line { + fill: none; + stroke-width: 3.5px; +} + +#skillmap .skills-chart .axis path, +#skillmap .skills-chart .axis line { + fill: none; +} + +#skillmap .skills-chart .x-axis path, +#skillmap .skills-chart .y-axis path { + stroke: #444; + stroke-width: 1px; + shape-rendering: geometricPrecision; +} + +#explanation { + position: absolute; + top: 165px; + left: 170px; + width: 140px; + text-align: center; + color: #666; + margin-top: 30px; +} + +#percentage { + font-size: 2em; +} + +#endlabel { + font-sizte: 1.5em; +} + +div.skills-sunburst text { + text-anchor: middle; +}
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/vim/css/vim.css b/portal/src/main/webapp/extsys/vim/css/vim.css new file mode 100644 index 0000000..0998451 --- /dev/null +++ b/portal/src/main/webapp/extsys/vim/css/vim.css @@ -0,0 +1,550 @@ +/** + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ +body { + font-family: microsoft yahei !important; +} + +/* blue pill (inspired by iTunes) +*******************************************************************************/ + +.grey { + background-color: #e5e5e5; + color: #333; +} + +.blue { + + background-color: #5b9bd1; + border-radius: 20px; + color: #fff; + font-weight: bold; + padding: 8px 0; + text-align: center; + width: 100px; +} + +.blue:hover { + background-color: #e8f3fd; + color: #5b9bd1; +} + +.blue.selected { + border: 0; + background-color: #5b9bd1; + color: #fff; +} + +.blue.selected:hover { + border: 0; + background-color: #5b9bd1; + color: #fff; +} + +p { + color: #444; + font-size: 14px; + font-weight: normal; + line-height: 21px; + margin: 0 0 12px 0; +} + +p.credit { + border-top: 1px solid #ccc; + font-size: 14px; + line-height: 140%; + margin: 36px 0 12px 0; + padding: 8px 0 0 0; + text-align: center; +} + +ul.column { + float: left; + list-style: none; + width: 675px; +} + +ul.column li { + background: #eee; + -webkit-border-radius: 5px; + border-radius: 5px; + -webkit-box-shadow: inset 0 1px 1px 0 #c7c7c7; + box-shadow: inset 0 1px 1px 0 #c7c7c7; + float: left; + margin: 10px 0 0 10px; + display: block; + height: 150px; + text-align: center; + width: 215px; +} + +/* Clear Floated Elements +------------------------------------------------------------------------------*/ +.column:after, .button-collection:after, .clearfix:after, div.project-info:after { + clear: both; + content: ' '; + display: block; + font-size: 0; + line-height: 0; + visibility: hidden; + width: 0; + height: 0; +} + +.container-fluid { + background-color: white !important; + min-height: 500px; +} + +.nav-tabs { + border: 0; +} + +.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { + border: 0; + border-top: 3px solid #F3565D; +} + +.nav-tabs > li > a { + border-radius: 0; +} + +.nav-tabs > li > a:hover { + background-color: #f1f3fa; + border: 1Px solid #f1f3fa; +} + +.c3 { + margin-top: 120px; +} + +.skills-chart-breadcrumb { + +} + +.blue:selected { + border: 0; + background-color: #5b9bd1; +} + +.btn { + /* border-width: 0; */ + /* padding: 7px 14px; */ + /* font-size: 14px; */ + /* outline: none !important; */ + /* background-image: none !important; */ + /* filter: none; */ + /* -webkit-box-shadow: none; */ + -moz-box-shadow: none; + /* box-shadow: none; */ + /* text-shadow: none; */ +} + +select { + border-width: 1px; + padding: 4px 1px; + border-radius: 4px; +} + +.input-sm { + padding: 4px 10px; +} + +.btn-block { + display: block; + width: 100%; + padding-left: 0; + padding-right: 0; +} + +/* Bootstrap buttons */ + +.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active { + color: #333; + background-color: #ededed; + border-color: #b3b3b3; +} + +.open .btn-default.dropdown-toggle { + color: #333; + background-color: #ededed; + border-color: #b3b3b3; +} + +.btn-default:active, .btn-default.active { + background-image: none; + background-color: #e0e0e0; + font-weight: bold; +} + +.btn-default:active:hover, .btn-default.active:hover { + background-color: #e6e6e6; +} + +.open .btn-default.dropdown-toggle { + background-image: none; +} + +.btn-default.disabled, .btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled:active, .btn-default.disabled.active, .btn-default[disabled], .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled]:active, .btn-default[disabled].active, fieldset[disabled] .btn-default, fieldset[disabled] .btn-default:hover, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default.active { + background-color: #fff; + border-color: #ccc; +} + +.btn-default .badge { + color: #fff; + background-color: #333; +} + +.btn-default > i[class^="icon-"], .btn-default > i[class*="icon-"] { + color: #8c8c8c; +} + +div[data-name="tab_zone"] div { + background-color: #f1f3fa; + padding: 0px; +} + +div[data-name="cond_zone"] div { + background-color: #fff; + margin-top: 15px; + margin-bottom: 15px; +} + +div[data-name="res-conds-zone"] { + display: inline; +} + +div[data-name="res-conds-zone"] select, div[data-name="res-conds-zone"] span { + /**height:33px;*/ + margin-left: 15px; + color: #5b9bd1; + border-color: #ccc; + font-weight: bold; +} + +.input { + width: 250px; + height: 34px; + padding: 6px 12px; + font-size: 14px; + line-height: 1.42857143; + color: #555; + background-color: #fff; + background-image: none; + border: 1px solid #ccc; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); + -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; +} + +div.separator { + margin: 20px; +} + +div.separator div { + text-align: center; + line-height: 0; +} + +div.separator-line { + height: 1px !important; + width: 100%; + background: #ddd; + overflow: hidden; +} + +.dropdown-toggle { + color: #5b9bd1; +} + +.calendar-date { + color: #5b9bd1; +} + +.range_inputs { + color: #5b9bd1; +} + +.btn.dropdown-toggle, .btn-group .btn.dropdown-toggle, .btn:hover, .btn:disabled, .btn[disabled], .btn:focus, .btn:active, .btn.active { + outline: none !important; + background-image: none !important; + filter: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + text-shadow: none; +} + +#skills-chart-breadcrumb { + margin-bottom: 10px +} + +/*增加daterangepicker的css*/ +input[name="daterange"] { + width: 220px; + line-height: 0; + height: 31px; + vertical-align: top; + margin-top: 2px; +} + +.daterangepicker .ranges { + width: 205px; +} + +.daterangepicker .ranges input { + width: 95px !important; +} + +td.details-control { + cursor: pointer; +} + +tr.shown td.details-control { +} + +.details table td { + word-wrap: break-word; + word-break: normal; + border-top: 1px solid #dddddd; +} + +.details table tr:first-child td { + border-top: none; +} + +.details table { + table-layout: fixed; + width: 100%; +} + +td.title { + width: 10%; +} + +table.dataTable tbody th, table.dataTable tbody td { + padding: 8px 10px; +} + +div.dataTables_length, div.dataTables_info { + display: inline; +} + +div.dataTables_paginate { + display: inline; + float: right; +} + +div.pagination-panel { + margin-right: 10px; +} + +input.pagination-panel-input { + width: 50px; +} + +#ict_res_table_div { + margin-top: 15px; +} + +#ict_res_table_div label { + font-weight: 100; +} + +.daterangepicker .daterangepicker_start_input label, .daterangepicker .daterangepicker_end_input label { + color: #5b9bd1; +} + +.daterangepicker .ranges .input-mini { + color: #5b9bd1; +} + +.cancelBtn { + padding: 5px 10px 5px 10px; +} + +.btn:focus, .btn:active:focus, .btn.active:focus { + outline: 0; +} + +#ict_res_table_div table { + width: 100% !important; +} + +.control-label .required { + color: #e02222; + font-size: 12px; + padding-left: 2px; +} + +#ict_vim_table tbody tr { + cursor: pointer; +} + +/*卡片面板样式*/ +.animated-panel { + -webkit-animation-duration: .5s; + animation-duration: .5s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-delay: 0.1s; +} + +.hpanel { + border: none; + box-shadow: none; + margin-bottom: 25px; + +} + +.hpanel .panel-body { + border: 1px solid #e4e5e7; + border-radius: 2px; + padding: 20px; + position: relative; +} + +.h-200 { + min-height: 120px; +} + +.m-t-xl { + margin-top: 40px; +} +.card-name{ + text-align: center; +} +.m-t-xl div { + margin-bottom: 15px; +} + +.text-success { + color: #0d638f; +} + +.hpanel > .panel-footer { + color: inherit; + border: 1px solid #e4e5e7; + border-top: none; + font-size: 90%; + background: #f7f9fa; + height: 40px; + padding: 5px 15px; +} + +.color_cloud { + color: #ccc; +} + +.stats-title { + +} + +h3 { + margin-top: 10px; + margin-bottom: 40px; + font-weight: 200; +} + +.blue-font { + color: #428bca; +} + +.hpanel > .panel-footer .pull-right a { + margin-left: 5px; +} + +.hpanel > .panel-footer .pull-right .btn { + min-width: 30px !important; +} + +.font-bold { + font-weight: 600; + margin-bottom: 15px; +} +.hpanel_show { + background-color: #f7f9fa; +} +.vnfm-padding { + padding-left: 0; +} +.step-content{ + margin-top: 20px; +} +.px-ui-steps{ + height: 36px; +} +.px-ui-horizon-ul-horizon{ + display: flex; + box-orient: horizontal; + margin: 0; + padding: 0; +} +.px-ui-steps-li{ + list-style: none; + position: relative; + width: 386px; + height: 24px; + line-height: 24px; + float: left; + margin-right: 0; +} +.px-ui-menuitem-div-passive{ + position: absolute; + top: 50%; + left: 50%; + min-width: 120px; + -webkit-transform: translate(-50%,-50%); + -moz-transform: translate(-50%,-50%); + -ms-transform: translate(-50%,-50%); + -o-transform: translate(-50%,-50%); + transform: translate(-50%,-50%); +} +.step-active div:first-child span:last-child{ + color: #4d5761; +} +.step-active div:last-child, .step-active div:first-child span:first-child{ + background: #33bcff; +} +.px-ui-steps-number-passive{ + width: 24px; + height: 24px; + border-radius: 50%; + display: inline-block; + margin-right: 10px; + float: left; + color: #fff; + text-align: center; + background: #ddd; +} +.px-ui-steps-title-passive{ + white-space: nowrap; +} +.px-ui-steps-title-active{ + color: #4d5761; +} +.px-ui-steps-title-passive{ + color: #7c868d; +} + +.px-ui-underline-passive{ + width: 100%; + height: 2px; + margin-top: 35px; + position: absolute; + background: #ddd; +}
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/vim/css/vimChart.css b/portal/src/main/webapp/extsys/vim/css/vimChart.css new file mode 100644 index 0000000..279798d --- /dev/null +++ b/portal/src/main/webapp/extsys/vim/css/vimChart.css @@ -0,0 +1,68 @@ +/** + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ +body { + color: #333; + font-family: "Microsoft yahei", Verdana, Arial, Helvetica, sans-serif !important; + padding: 0px !important; + margin: 0px !important; + direction: ltr; + background-color: #f1f3fa !important; +} + +.row { + margin-left: 0px; + margin-right: 0px; +} + +select { + border-width: 1px; + padding: 4px 1px; + border-radius: 4px; +} + +.container-fluid { + background-color: #fff; +} + +.titlefont { + font-size: 16px; + margin-left: 10px; +} + +.separator-line { + height: 1px; + width: 100%; + background: #ddd; + overflow: hidden; + margin-bottom: 15px; + margin-top: 6px; + opacity: 0.6; +} + +.main { + height: 400px; + /* width: 778px !important; */ + overflow: hidden; + padding: 10px; + margin-bottom: 10px; + border: 1px solid #e3e3e3; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); +}
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/vim/i18n/loadi18nApp.js b/portal/src/main/webapp/extsys/vim/i18n/loadi18nApp.js new file mode 100644 index 0000000..d0388b3 --- /dev/null +++ b/portal/src/main/webapp/extsys/vim/i18n/loadi18nApp.js @@ -0,0 +1,42 @@ +/* + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ +function loadPropertiesSideMenu(lang, propertiesFileNamePrefix, propertiesFilePath) { + jQuery.i18n.properties({ + language: lang, + name: propertiesFileNamePrefix, + path: propertiesFilePath, // resource path + mode: 'map', + callback: function () { + var i18nItems = $('[name_i18n=com_zte_conductor_ui_i18n]'); + for (var i = 0; i < i18nItems.length; i++) { + var $item = $(i18nItems.eq(i)); + var itemId = $item.attr('id_i18n'); + var itemTitle = $item.attr('title'); + if (typeof($item.attr("title")) == "string") { + $item.attr("title", ($.i18n.prop(itemTitle))); + } + if (undefined != itemId && typeof($item.attr("placeholder")) == "undefined") { + $item.text($.i18n.prop(itemId)); + } else if (undefined != itemId && typeof($item.attr("placeholder")) != "undefined") { + $item.attr("placeholder", $.i18n.prop(itemId)); + } + } + } + }); +} +var lang = getLanguage(); +loadPropertiesSideMenu(lang, 'roc-vim-iui-i18n', 'i18n/'); + diff --git a/portal/src/main/webapp/extsys/vim/i18n/roc-vim-iui-i18n-en-US.properties b/portal/src/main/webapp/extsys/vim/i18n/roc-vim-iui-i18n-en-US.properties new file mode 100644 index 0000000..de4baa3 --- /dev/null +++ b/portal/src/main/webapp/extsys/vim/i18n/roc-vim-iui-i18n-en-US.properties @@ -0,0 +1,93 @@ +# +# Copyright 2016-2017 ZTE Corporation. +# +# 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. +# + +############## vimView.html i18n ############## +com_zte_ums_eco_roc_vim_checking_status=Checking vim status... +com_zte_ums_eco_roc_vim_name=Name +com_zte_ums_eco_roc_vim_auth_url=Auth URL +com_zte_ums_eco_roc_vim_username=Username +com_zte_ums_eco_roc_vim_password=Password +com_zte_ums_eco_roc_vim_tenant=Tenant +com_zte_ums_eco_roc_vim_vendor=Vendor +com_zte_ums_eco_roc_vim_type=Type +com_zte_ums_eco_roc_vim_version=Version +com_zte_ums_eco_roc_vim_cancel=Cancel +com_zte_ums_eco_roc_vim_save=Save +com_zte_ums_eco_roc_vim_status_update_time=Status update time: +com_zte_ums_eco_roc_vim_register=Register +com_zte_ums_eco_roc_vim_normal=Normal +com_zte_ums_eco_roc_vim_abnormal=Abnormal +com_zte_ums_eco_roc_vim_display_type=Cloud type: +com_zte_ums_eco_roc_vim_display_version=Cloud region version: +com_zte_ums_eco_roc_vim_total=Total +com_zte_ums_eco_roc_vim_metric=vims +com_zte_ums_eco_roc_vim_register_info=Register +com_zte_ums_eco_roc_vim_modify_info=Modify +com_zte_ums_eco_roc_vim_domain=Domain +com_zte_ums_eco_roc_vim_description=Description +############## js ###################### +com_zte_ums_eco_roc_vim_auth_url_require_message=please input auth url +com_zte_ums_eco_roc_vim_auth_url_alarm_message=example: http://xx.xx.xx.xx:5000/v2.0 +com_zte_ums_eco_roc_vim_name_alarm_message=please input vim name +com_zte_ums_eco_roc_vim_username_alarm_message=please input username +com_zte_ums_eco_roc_vim_password_alarm_message=please input password +com_zte_ums_eco_roc_vim_tenant_alarm_message=please input tenant +com_zte_ums_eco_roc_vim_version_alarm_message=please input version +com_zte_ums_eco_roc_vim_vendor_alarm_message=please input vendor +com_zte_ums_eco_roc_vim_getting_info=getting info... +com_zte_ums_eco_roc_vim_dealing_info=dealing +com_zte_ums_eco_roc_vim_confirm_delete_vim_record=Do you want to delete this instance? +com_zte_ums_eco_roc_vim_vdu_isExists=This VIM's VUDs are used, you can't remove it. +com_zte_ums_eco_roc_vim_growl_msg_query_vdu_failed=query VDU failed + +com_zte_ums_eco_roc_vim_growl_msg_title=vim info +com_zte_ums_eco_roc_vim_growl_msg_remove_success=delete success +com_zte_ums_eco_roc_vim_growl_msg_remove_failed=delete failed +com_zte_ums_eco_roc_vim_growl_msg_remove_server_success=delete server success: +com_zte_ums_eco_roc_vim_growl_msg_remove_server_failed=delete server falied: +com_zte_ums_eco_roc_vim_growl_msg_query_failed=query faile + +com_zte_ums_eco_roc_vim_growl_msg_save_success=save success +com_zte_ums_eco_roc_vim_growl_msg_save_failed=save failed +com_zte_ums_eco_roc_vim_growl_msg_add_server_success=add server success, access port： +com_zte_ums_eco_roc_vim_growl_msg_add_server_failed=add server falied： + + +############## vimChart.html i18n ############## + +com_zte_ums_eco_roc_vim_resource_use=-resource using status +com_zte_ums_eco_roc_vim_resource_vim_use=virtual machine manager resource using status +com_zte_ums_eco_roc_vim_resource_tenant_use=-tenant quota using status + +com_zte_ums_eco_roc_vim_resource_chart_used=used: +com_zte_ums_eco_roc_vim_resource_chart_total=total: +com_zte_ums_eco_roc_vim_resource_chart_return=return +com_zte_ums_eco_roc_vim_resource_chart_save_picture=save picture as +com_zte_ums_eco_roc_vim_resource_chart_click_save=click save + +com_zte_ums_eco_roc_vim_resource_vim_cpu=CPU +com_zte_ums_eco_roc_vim_resource_vim_memory=Memory +com_zte_ums_eco_roc_vim_resource_vim_disk=Disk + +com_zte_ums_eco_roc_vim_resource_tenant_cpu=CPU +com_zte_ums_eco_roc_vim_resource_tenant_memoryMb=Memory +com_zte_ums_eco_roc_vim_resource_tenant_instances=Instances +com_zte_ums_eco_roc_vim_resource_tenant_floatingIps=FloatingIps +com_zte_ums_eco_roc_vim_resource_tenant_securityGroups=securityGroup +com_zte_ums_eco_roc_vim_resource_tenant_volumeStorage=volumeStorage +com_zte_ums_eco_roc_vim_resource_tenant_volumes=Volumes + +com_zte_ums_eco_roc_vim_title_notice=Notice: diff --git a/portal/src/main/webapp/extsys/vim/i18n/roc-vim-iui-i18n-zh-CN.properties b/portal/src/main/webapp/extsys/vim/i18n/roc-vim-iui-i18n-zh-CN.properties new file mode 100644 index 0000000..dec6e8d --- /dev/null +++ b/portal/src/main/webapp/extsys/vim/i18n/roc-vim-iui-i18n-zh-CN.properties @@ -0,0 +1,95 @@ +# +# Copyright 2016-2017 ZTE Corporation. +# +# 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. +# + + +############## vimView.html i18n ############## +com_zte_ums_eco_roc_vim_checking_status=vim连接状态检查中... +com_zte_ums_eco_roc_vim_name=名称 +com_zte_ums_eco_roc_vim_auth_url=接入URL +com_zte_ums_eco_roc_vim_username=用户名 +com_zte_ums_eco_roc_vim_password=密码 +com_zte_ums_eco_roc_vim_tenant=租户 +com_zte_ums_eco_roc_vim_vendor=厂商 +com_zte_ums_eco_roc_vim_type=类型 +com_zte_ums_eco_roc_vim_version=版本 +com_zte_ums_eco_roc_vim_cancel=取消 +com_zte_ums_eco_roc_vim_save=保存 +com_zte_ums_eco_roc_vim_status_update_time=状态更新时间： +com_zte_ums_eco_roc_vim_register=注册VIM +com_zte_ums_eco_roc_vim_normal=正常 +com_zte_ums_eco_roc_vim_abnormal=报警 +com_zte_ums_eco_roc_vim_display_type=类型： +com_zte_ums_eco_roc_vim_total=共 +com_zte_ums_eco_roc_vim_metric=个vim +com_zte_ums_eco_roc_vim_register_info=注册vim信息 +com_zte_ums_eco_roc_vim_modify_info=修改vim信息 +com_zte_ums_eco_roc_vim_domain=域信息 +com_zte_ums_eco_roc_vim_description=描述 +############## js ###################### +com_zte_ums_eco_roc_vim_auth_url_require_message=请输入url +com_zte_ums_eco_roc_vim_auth_url_alarm_message=url格式有误(参考：http://xx.xx.xx.xx:5000/v2.0) +com_zte_ums_eco_roc_vim_name_alarm_message=请输入名称 +com_zte_ums_eco_roc_vim_username_alarm_message=请输入用户名 +com_zte_ums_eco_roc_vim_password_alarm_message=请输入密码 +com_zte_ums_eco_roc_vim_tenant_alarm_message=请输入租户 +com_zte_ums_eco_roc_vim_version_alarm_message=请输入版本号 +com_zte_ums_eco_roc_vim_vendor_alarm_message=请输入厂商 + +com_zte_ums_eco_roc_vim_getting_info=获取中... +com_zte_ums_eco_roc_vim_dealing_info=处理中... + +com_zte_ums_eco_roc_vim_confirm_delete_vim_record=确定删除所选vim信息？ +com_zte_ums_eco_roc_vim_vdu_isExists=业务编排仍在使用此VIM上的VDU，不能删除它 +com_zte_ums_eco_roc_vim_growl_msg_query_vdu_failed=查询VDU失败 + + +com_zte_ums_eco_roc_vim_growl_msg_title=vim信息 +com_zte_ums_eco_roc_vim_growl_msg_remove_success=删除成功 +com_zte_ums_eco_roc_vim_growl_msg_remove_failed=删除失败 +com_zte_ums_eco_roc_vim_growl_msg_save_success=保存成功 +com_zte_ums_eco_roc_vim_growl_msg_save_failed=保存失败 +com_zte_ums_eco_roc_vim_growl_msg_remove_server_success=删除Server成功： +com_zte_ums_eco_roc_vim_growl_msg_remove_server_failed=删除Server失败： +com_zte_ums_eco_roc_vim_growl_msg_query_failed=查询失败 +com_zte_ums_eco_roc_vim_growl_msg_add_server_success=增加Server成功，端口号： +com_zte_ums_eco_roc_vim_growl_msg_add_server_failed=增加Server失败： + + +############## vimChart.html i18n ############## + +com_zte_ums_eco_roc_vim_resource_use=-资源使用情况 +com_zte_ums_eco_roc_vim_resource_vim_use=虚拟机管理器资源使用情况 +com_zte_ums_eco_roc_vim_resource_tenant_use=-租户配额使用情况 + +com_zte_ums_eco_roc_vim_resource_chart_used=已用: +com_zte_ums_eco_roc_vim_resource_chart_total=总共: +com_zte_ums_eco_roc_vim_resource_chart_return=返回 +com_zte_ums_eco_roc_vim_resource_chart_save_picture=保存为图片 +com_zte_ums_eco_roc_vim_resource_chart_click_save=点击保存 + +com_zte_ums_eco_roc_vim_resource_vim_cpu=虚拟内核 +com_zte_ums_eco_roc_vim_resource_vim_memory=内存 +com_zte_ums_eco_roc_vim_resource_vim_disk=磁盘 + +com_zte_ums_eco_roc_vim_resource_tenant_cpu=虚拟内核 +com_zte_ums_eco_roc_vim_resource_tenant_memoryMb=内存 +com_zte_ums_eco_roc_vim_resource_tenant_instances=实例 +com_zte_ums_eco_roc_vim_resource_tenant_floatingIps=浮动IP +com_zte_ums_eco_roc_vim_resource_tenant_securityGroups=安全组 +com_zte_ums_eco_roc_vim_resource_tenant_volumeStorage=卷存储 +com_zte_ums_eco_roc_vim_resource_tenant_volumes=云硬盘 + +com_zte_ums_eco_roc_vim_title_notice=提示:
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/vim/js/client-cometd.js b/portal/src/main/webapp/extsys/vim/js/client-cometd.js new file mode 100644 index 0000000..86c60bf --- /dev/null +++ b/portal/src/main/webapp/extsys/vim/js/client-cometd.js @@ -0,0 +1,63 @@ +/* + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ +/** + * Created by 10184303 on 15-11-17. + */ + +$(function () { + var registerCometdMessage = function (url, callback) { + var cometd = new $.Cometd(); + var cometdURL = location.protocol + "//" + location.host + "/api/nsocnotification/v1"; + cometd.configure({ + url: cometdURL, + logLevel: "debug" + }); + + cometd.addListener("/meta/handshake", function (handshake) { + if (handshake.successful === true) { + cometd.batch(function () { + cometd.subscribe(url, function (message) { + callback.call(this, message.data); + }); + }); + } + }); + cometd.handshake(); + } + registerCometdMessage("/VIMstatus", function (data) { + var alarmArray = JSON.parse(data.greeting); + console.log(data.greeting); + for (var i = 0; i < alarmArray.length; i++) { + vm.vimStatusTime = alarmArray[i].checkTime; + for (var n = 0; n < vm.vimInfo.length; n++) { + if (alarmArray[i].id == vm.vimInfo[n].oid && alarmArray[i].hostStorageInfo == "") { + vm.vimInfo[n].status = alarmArray[i].status; + vm.vimInfo[n].errorInfo = alarmArray[i].alarmContent; + break; + } + if (alarmArray[i].id == vm.vimInfo[n].oid && alarmArray[i].hostStorageInfo.length != "") { + vm.vimInfo[n].status = "inactive"; + vm.vimInfo[n].errorInfo = alarmArray[i].hostStorageInfo; + break; + } + + } + } + + setTimeout('resUtil.tooltipVimStatus()', 5000); + }); +}); + diff --git a/portal/src/main/webapp/extsys/vim/js/jqBootstrapValidation.js b/portal/src/main/webapp/extsys/vim/js/jqBootstrapValidation.js new file mode 100644 index 0000000..d88405b --- /dev/null +++ b/portal/src/main/webapp/extsys/vim/js/jqBootstrapValidation.js @@ -0,0 +1,925 @@ +/* + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ +/* jqBootstrapValidation + * A plugin for automating validation on Twitter Bootstrap formatted forms. + * + * v1.3.6 + * + * License: MIT <http://opensource.org/licenses/mit-license.php> - see LICENSE file + * + * http://ReactiveRaven.github.com/jqBootstrapValidation/ + */ + +(function ($) { + + var createdElements = []; + + var defaults = { + options: { + prependExistingHelpBlock: false, + sniffHtml: true, // sniff for 'required', 'maxlength', etc + preventSubmit: true, // stop the form submit event from firing if validation fails + submitError: false, // function called if there is an error when trying to submit + submitSuccess: false, // function called just before a successful submit event is sent to the server + semanticallyStrict: false, // set to true to tidy up generated HTML output + autoAdd: { + helpBlocks: true + }, + filter: function () { + // return $(this).is(":visible"); // only validate elements you can see + return true; // validate everything + } + }, + methods: { + init: function (options) { + + var settings = $.extend(true, {}, defaults); + + settings.options = $.extend(true, settings.options, options); + + var $siblingElements = this; + + var uniqueForms = $.unique( + $siblingElements.map(function () { + return $(this).parents("form")[0]; + }).toArray() + ); + + $(uniqueForms).bind("submit", function (e) { + var $form = $(this); + var warningsFound = 0; + var $inputs = $form.find("input,textarea,select").not("[type=submit],[type=image]").filter(settings.options.filter); + $inputs.trigger("submit.validation").trigger("validationLostFocus.validation"); + + $inputs.each(function (i, el) { + var $this = $(el), + $controlGroup = $this.parents(".control-group").first(); + if ( + $controlGroup.hasClass("warning") + ) { + $controlGroup.removeClass("warning").addClass("error"); + warningsFound++; + } + }); + + $inputs.trigger("validationLostFocus.validation"); + + if (warningsFound) { + if (settings.options.preventSubmit) { + e.preventDefault(); + } + $form.addClass("error"); + if ($.isFunction(settings.options.submitError)) { + settings.options.submitError($form, e, $inputs.jqBootstrapValidation("collectErrors", true)); + } + } else { + $form.removeClass("error"); + if ($.isFunction(settings.options.submitSuccess)) { + settings.options.submitSuccess($form, e); + } + } + }); + + return this.each(function () { + + // Get references to everything we're interested in + var $this = $(this), + $controlGroup = $this.parents(".control-group").first(), + $helpBlock = $controlGroup.find(".help-block").first(), + $form = $this.parents("form").first(), + validatorNames = []; + + // create message container if not exists + if (!$helpBlock.length && settings.options.autoAdd && settings.options.autoAdd.helpBlocks) { + $helpBlock = $('<div class="help-block" />'); + $controlGroup.find('.controls').append($helpBlock); + createdElements.push($helpBlock[0]); + } + + // ============================================================= + // SNIFF HTML FOR VALIDATORS + // ============================================================= + + // *snort sniff snuffle* + + if (settings.options.sniffHtml) { + var message = ""; + // --------------------------------------------------------- + // PATTERN + // --------------------------------------------------------- + if ($this.attr("pattern") !== undefined) { + message = "Not in the expected format<!-- data-validation-pattern-message to override -->"; + if ($this.data("validationPatternMessage")) { + message = $this.data("validationPatternMessage"); + } + $this.data("validationPatternMessage", message); + $this.data("validationPatternRegex", $this.attr("pattern")); + } + // --------------------------------------------------------- + // MAX + // --------------------------------------------------------- + if ($this.attr("max") !== undefined || $this.attr("aria-valuemax") !== undefined) { + var max = ($this.attr("max") !== undefined ? $this.attr("max") : $this.attr("aria-valuemax")); + message = "Too high: Maximum of '" + max + "'<!-- data-validation-max-message to override -->"; + if ($this.data("validationMaxMessage")) { + message = $this.data("validationMaxMessage"); + } + $this.data("validationMaxMessage", message); + $this.data("validationMaxMax", max); + } + // --------------------------------------------------------- + // MIN + // --------------------------------------------------------- + if ($this.attr("min") !== undefined || $this.attr("aria-valuemin") !== undefined) { + var min = ($this.attr("min") !== undefined ? $this.attr("min") : $this.attr("aria-valuemin")); + message = "Too low: Minimum of '" + min + "'<!-- data-validation-min-message to override -->"; + if ($this.data("validationMinMessage")) { + message = $this.data("validationMinMessage"); + } + $this.data("validationMinMessage", message); + $this.data("validationMinMin", min); + } + // --------------------------------------------------------- + // MAXLENGTH + // --------------------------------------------------------- + if ($this.attr("maxlength") !== undefined) { + message = "Too long: Maximum of '" + $this.attr("maxlength") + "' characters<!-- data-validation-maxlength-message to override -->"; + if ($this.data("validationMaxlengthMessage")) { + message = $this.data("validationMaxlengthMessage"); + } + $this.data("validationMaxlengthMessage", message); + $this.data("validationMaxlengthMaxlength", $this.attr("maxlength")); + } + // --------------------------------------------------------- + // MINLENGTH + // --------------------------------------------------------- + if ($this.attr("minlength") !== undefined) { + message = "Too short: Minimum of '" + $this.attr("minlength") + "' characters<!-- data-validation-minlength-message to override -->"; + if ($this.data("validationMinlengthMessage")) { + message = $this.data("validationMinlengthMessage"); + } + $this.data("validationMinlengthMessage", message); + $this.data("validationMinlengthMinlength", $this.attr("minlength")); + } + // --------------------------------------------------------- + // REQUIRED + // --------------------------------------------------------- + if ($this.attr("required") !== undefined || $this.attr("aria-required") !== undefined) { + message = settings.builtInValidators.required.message; + if ($this.data("validationRequiredMessage")) { + message = $this.data("validationRequiredMessage"); + } + $this.data("validationRequiredMessage", message); + } + // --------------------------------------------------------- + // NUMBER + // --------------------------------------------------------- + if ($this.attr("type") !== undefined && $this.attr("type").toLowerCase() === "number") { + message = settings.builtInValidators.number.message; + if ($this.data("validationNumberMessage")) { + message = $this.data("validationNumberMessage"); + } + $this.data("validationNumberMessage", message); + } + // --------------------------------------------------------- + // EMAIL + // --------------------------------------------------------- + if ($this.attr("type") !== undefined && $this.attr("type").toLowerCase() === "email") { + message = "Not a valid email address<!-- data-validator-validemail-message to override -->"; + if ($this.data("validationValidemailMessage")) { + message = $this.data("validationValidemailMessage"); + } else if ($this.data("validationEmailMessage")) { + message = $this.data("validationEmailMessage"); + } + $this.data("validationValidemailMessage", message); + } + // --------------------------------------------------------- + // MINCHECKED + // --------------------------------------------------------- + if ($this.attr("minchecked") !== undefined) { + message = "Not enough options checked; Minimum of '" + $this.attr("minchecked") + "' required<!-- data-validation-minchecked-message to override -->"; + if ($this.data("validationMincheckedMessage")) { + message = $this.data("validationMincheckedMessage"); + } + $this.data("validationMincheckedMessage", message); + $this.data("validationMincheckedMinchecked", $this.attr("minchecked")); + } + // --------------------------------------------------------- + // MAXCHECKED + // --------------------------------------------------------- + if ($this.attr("maxchecked") !== undefined) { + message = "Too many options checked; Maximum of '" + $this.attr("maxchecked") + "' required<!-- data-validation-maxchecked-message to override -->"; + if ($this.data("validationMaxcheckedMessage")) { + message = $this.data("validationMaxcheckedMessage"); + } + $this.data("validationMaxcheckedMessage", message); + $this.data("validationMaxcheckedMaxchecked", $this.attr("maxchecked")); + } + } + + // ============================================================= + // COLLECT VALIDATOR NAMES + // ============================================================= + + // Get named validators + if ($this.data("validation") !== undefined) { + validatorNames = $this.data("validation").split(","); + } + + // Get extra ones defined on the element's data attributes + $.each($this.data(), function (i, el) { + var parts = i.replace(/([A-Z])/g, ",$1").split(","); + if (parts[0] === "validation" && parts[1]) { + validatorNames.push(parts[1]); + } + }); + + // ============================================================= + // NORMALISE VALIDATOR NAMES + // ============================================================= + + var validatorNamesToInspect = validatorNames; + var newValidatorNamesToInspect = []; + + do // repeatedly expand 'shortcut' validators into their real validators + { + // Uppercase only the first letter of each name + $.each(validatorNames, function (i, el) { + validatorNames[i] = formatValidatorName(el); + }); + + // Remove duplicate validator names + validatorNames = $.unique(validatorNames); + + // Pull out the new validator names from each shortcut + newValidatorNamesToInspect = []; + $.each(validatorNamesToInspect, function (i, el) { + if ($this.data("validation" + el + "Shortcut") !== undefined) { + // Are these custom validators? + // Pull them out! + $.each($this.data("validation" + el + "Shortcut").split(","), function (i2, el2) { + newValidatorNamesToInspect.push(el2); + }); + } else if (settings.builtInValidators[el.toLowerCase()]) { + // Is this a recognised built-in? + // Pull it out! + var validator = settings.builtInValidators[el.toLowerCase()]; + if (validator.type.toLowerCase() === "shortcut") { + $.each(validator.shortcut.split(","), function (i, el) { + el = formatValidatorName(el); + newValidatorNamesToInspect.push(el); + validatorNames.push(el); + }); + } + } + }); + + validatorNamesToInspect = newValidatorNamesToInspect; + + } while (validatorNamesToInspect.length > 0) + + // ============================================================= + // SET UP VALIDATOR ARRAYS + // ============================================================= + + var validators = {}; + + $.each(validatorNames, function (i, el) { + // Set up the 'override' message + var message = $this.data("validation" + el + "Message"); + var hasOverrideMessage = (message !== undefined); + var foundValidator = false; + message = + ( + message + ? message + : "'" + el + "' validation failed <!-- Add attribute 'data-validation-" + el.toLowerCase() + "-message' to input to change this message -->" + ) + ; + + $.each( + settings.validatorTypes, + function (validatorType, validatorTemplate) { + if (validators[validatorType] === undefined) { + validators[validatorType] = []; + } + if (!foundValidator && $this.data("validation" + el + formatValidatorName(validatorTemplate.name)) !== undefined) { + validators[validatorType].push( + $.extend( + true, + { + name: formatValidatorName(validatorTemplate.name), + message: message + }, + validatorTemplate.init($this, el) + ) + ); + foundValidator = true; + } + } + ); + + if (!foundValidator && settings.builtInValidators[el.toLowerCase()]) { + + var validator = $.extend(true, {}, settings.builtInValidators[el.toLowerCase()]); + if (hasOverrideMessage) { + validator.message = message; + } + var validatorType = validator.type.toLowerCase(); + + if (validatorType === "shortcut") { + foundValidator = true; + } else { + $.each( + settings.validatorTypes, + function (validatorTemplateType, validatorTemplate) { + if (validators[validatorTemplateType] === undefined) { + validators[validatorTemplateType] = []; + } + if (!foundValidator && validatorType === validatorTemplateType.toLowerCase()) { + $this.data("validation" + el + formatValidatorName(validatorTemplate.name), validator[validatorTemplate.name.toLowerCase()]); + validators[validatorType].push( + $.extend( + validator, + validatorTemplate.init($this, el) + ) + ); + foundValidator = true; + } + } + ); + } + } + + if (!foundValidator) { + $.error("Cannot find validation info for '" + el + "'"); + } + }); + + // ============================================================= + // STORE FALLBACK VALUES + // ============================================================= + + $helpBlock.data( + "original-contents", + ( + $helpBlock.data("original-contents") + ? $helpBlock.data("original-contents") + : $helpBlock.html() + ) + ); + + $helpBlock.data( + "original-role", + ( + $helpBlock.data("original-role") + ? $helpBlock.data("original-role") + : $helpBlock.attr("role") + ) + ); + + $controlGroup.data( + "original-classes", + ( + $controlGroup.data("original-clases") + ? $controlGroup.data("original-classes") + : $controlGroup.attr("class") + ) + ); + + $this.data( + "original-aria-invalid", + ( + $this.data("original-aria-invalid") + ? $this.data("original-aria-invalid") + : $this.attr("aria-invalid") + ) + ); + + // ============================================================= + // VALIDATION + // ============================================================= + + $this.bind( + "validation.validation", + function (event, params) { + + var value = getValue($this); + + // Get a list of the errors to apply + var errorsFound = []; + + $.each(validators, function (validatorType, validatorTypeArray) { + if (value || value.length || (params && params.includeEmpty) || (!!settings.validatorTypes[validatorType].blockSubmit && params && !!params.submitting)) { + $.each(validatorTypeArray, function (i, validator) { + if (settings.validatorTypes[validatorType].validate($this, value, validator)) { + errorsFound.push(validator.message); + } + }); + } + }); + + return errorsFound; + } + ); + + $this.bind( + "getValidators.validation", + function () { + return validators; + } + ); + + // ============================================================= + // WATCH FOR CHANGES + // ============================================================= + $this.bind( + "submit.validation", + function () { + return $this.triggerHandler("change.validation", {submitting: true}); + } + ); + $this.bind( + [ + "keyup", + "focus", + "blur", + "click", + "keydown", + "keypress", + "change" + ].join(".validation ") + ".validation", + function (e, params) { + + var value = getValue($this); + + var errorsFound = []; + + $controlGroup.find("input,textarea,select").each(function (i, el) { + var oldCount = errorsFound.length; + $.each($(el).triggerHandler("validation.validation", params), function (j, message) { + errorsFound.push(message); + }); + if (errorsFound.length > oldCount) { + $(el).attr("aria-invalid", "true"); + } else { + var original = $this.data("original-aria-invalid"); + $(el).attr("aria-invalid", (original !== undefined ? original : false)); + } + }); + + $form.find("input,select,textarea").not($this).not("[name=\"" + $this.attr("name") + "\"]").trigger("validationLostFocus.validation"); + + errorsFound = $.unique(errorsFound.sort()); + + // Were there any errors? + if (errorsFound.length) { + // Better flag it up as a warning. + $controlGroup.removeClass("success error").addClass("warning"); + + // How many errors did we find? + if (settings.options.semanticallyStrict && errorsFound.length === 1) { + // Only one? Being strict? Just output it. + $helpBlock.html(errorsFound[0] + + ( settings.options.prependExistingHelpBlock ? $helpBlock.data("original-contents") : "" )); + } else { + // Multiple? Being sloppy? Glue them together into an UL. + $helpBlock.html("<ul role=\"alert\"><li>" + errorsFound.join("</li><li>") + "</li></ul>" + + ( settings.options.prependExistingHelpBlock ? $helpBlock.data("original-contents") : "" )); + } + } else { + $controlGroup.removeClass("warning error success"); + if (value.length > 0) { + $controlGroup.addClass("success"); + } + $helpBlock.html($helpBlock.data("original-contents")); + } + + if (e.type === "blur") { + $controlGroup.removeClass("success"); + } + } + ); + $this.bind("validationLostFocus.validation", function () { + $controlGroup.removeClass("success"); + }); + }); + }, + destroy: function () { + + return this.each( + function () { + + var + $this = $(this), + $controlGroup = $this.parents(".control-group").first(), + $helpBlock = $controlGroup.find(".help-block").first(); + + // remove our events + $this.unbind('.validation'); // events are namespaced. + // reset help text + $helpBlock.html($helpBlock.data("original-contents")); + // reset classes + $controlGroup.attr("class", $controlGroup.data("original-classes")); + // reset aria + $this.attr("aria-invalid", $this.data("original-aria-invalid")); + // reset role + $helpBlock.attr("role", $this.data("original-role")); + // remove all elements we created + if (createdElements.indexOf($helpBlock[0]) > -1) { + $helpBlock.remove(); + } + + } + ); + + }, + collectErrors: function (includeEmpty) { + + var errorMessages = {}; + this.each(function (i, el) { + var $el = $(el); + var name = $el.attr("name"); + var errors = $el.triggerHandler("validation.validation", {includeEmpty: true}); + errorMessages[name] = $.extend(true, errors, errorMessages[name]); + }); + + $.each(errorMessages, function (i, el) { + if (el.length === 0) { + delete errorMessages[i]; + } + }); + + return errorMessages; + + }, + hasErrors: function () { + + var errorMessages = []; + + this.each(function (i, el) { + errorMessages = errorMessages.concat( + $(el).triggerHandler("getValidators.validation") ? $(el).triggerHandler("validation.validation", {submitting: true}) : [] + ); + }); + + return (errorMessages.length > 0); + }, + override: function (newDefaults) { + defaults = $.extend(true, defaults, newDefaults); + } + }, + validatorTypes: { + callback: { + name: "callback", + init: function ($this, name) { + return { + validatorName: name, + callback: $this.data("validation" + name + "Callback"), + lastValue: $this.val(), + lastValid: true, + lastFinished: true + }; + }, + validate: function ($this, value, validator) { + if (validator.lastValue === value && validator.lastFinished) { + return !validator.lastValid; + } + + if (validator.lastFinished === true) { + validator.lastValue = value; + validator.lastValid = true; + validator.lastFinished = false; + + var rrjqbvValidator = validator; + var rrjqbvThis = $this; + executeFunctionByName( + validator.callback, + window, + $this, + value, + function (data) { + if (rrjqbvValidator.lastValue === data.value) { + rrjqbvValidator.lastValid = data.valid; + if (data.message) { + rrjqbvValidator.message = data.message; + } + rrjqbvValidator.lastFinished = true; + rrjqbvThis.data("validation" + rrjqbvValidator.validatorName + "Message", rrjqbvValidator.message); + // Timeout is set to avoid problems with the events being considered 'already fired' + setTimeout(function () { + rrjqbvThis.trigger("change.validation"); + }, 1); // doesn't need a long timeout, just long enough for the event bubble to burst + } + } + ); + } + + return false; + + } + }, + ajax: { + name: "ajax", + init: function ($this, name) { + return { + validatorName: name, + url: $this.data("validation" + name + "Ajax"), + lastValue: $this.val(), + lastValid: true, + lastFinished: true + }; + }, + validate: function ($this, value, validator) { + if ("" + validator.lastValue === "" + value && validator.lastFinished === true) { + return validator.lastValid === false; + } + + if (validator.lastFinished === true) { + validator.lastValue = value; + validator.lastValid = true; + validator.lastFinished = false; + $.ajax({ + url: validator.url, + data: "value=" + value + "&field=" + $this.attr("name"), + dataType: "json", + success: function (data) { + if ("" + validator.lastValue === "" + data.value) { + validator.lastValid = !!(data.valid); + if (data.message) { + validator.message = data.message; + } + validator.lastFinished = true; + $this.data("validation" + validator.validatorName + "Message", validator.message); + // Timeout is set to avoid problems with the events being considered 'already fired' + setTimeout(function () { + $this.trigger("change.validation"); + }, 1); // doesn't need a long timeout, just long enough for the event bubble to burst + } + }, + failure: function () { + validator.lastValid = true; + validator.message = "ajax call failed"; + validator.lastFinished = true; + $this.data("validation" + validator.validatorName + "Message", validator.message); + // Timeout is set to avoid problems with the events being considered 'already fired' + setTimeout(function () { + $this.trigger("change.validation"); + }, 1); // doesn't need a long timeout, just long enough for the event bubble to burst + } + }); + } + + return false; + + } + }, + regex: { + name: "regex", + init: function ($this, name) { + return {regex: regexFromString($this.data("validation" + name + "Regex"))}; + }, + validate: function ($this, value, validator) { + return (!validator.regex.test(value) && !validator.negative) + || (validator.regex.test(value) && validator.negative); + } + }, + required: { + name: "required", + init: function ($this, name) { + return {}; + }, + validate: function ($this, value, validator) { + return !!(value.length === 0 && !validator.negative) + || !!(value.length > 0 && validator.negative); + }, + blockSubmit: true + }, + match: { + name: "match", + init: function ($this, name) { + var element = $this.parents("form").first().find("[name=\"" + $this.data("validation" + name + "Match") + "\"]").first(); + element.bind("validation.validation", function () { + $this.trigger("change.validation", {submitting: true}); + }); + return {"element": element}; + }, + validate: function ($this, value, validator) { + return (value !== validator.element.val() && !validator.negative) + || (value === validator.element.val() && validator.negative); + }, + blockSubmit: true + }, + max: { + name: "max", + init: function ($this, name) { + return {max: $this.data("validation" + name + "Max")}; + }, + validate: function ($this, value, validator) { + return (parseFloat(value, 10) > parseFloat(validator.max, 10) && !validator.negative) + || (parseFloat(value, 10) <= parseFloat(validator.max, 10) && validator.negative); + } + }, + min: { + name: "min", + init: function ($this, name) { + return {min: $this.data("validation" + name + "Min")}; + }, + validate: function ($this, value, validator) { + return (parseFloat(value) < parseFloat(validator.min) && !validator.negative) + || (parseFloat(value) >= parseFloat(validator.min) && validator.negative); + } + }, + maxlength: { + name: "maxlength", + init: function ($this, name) { + return {maxlength: $this.data("validation" + name + "Maxlength")}; + }, + validate: function ($this, value, validator) { + return ((value.length > validator.maxlength) && !validator.negative) + || ((value.length <= validator.maxlength) && validator.negative); + } + }, + minlength: { + name: "minlength", + init: function ($this, name) { + return {minlength: $this.data("validation" + name + "Minlength")}; + }, + validate: function ($this, value, validator) { + return ((value.length < validator.minlength) && !validator.negative) + || ((value.length >= validator.minlength) && validator.negative); + } + }, + maxchecked: { + name: "maxchecked", + init: function ($this, name) { + var elements = $this.parents("form").first().find("[name=\"" + $this.attr("name") + "\"]"); + elements.bind("click.validation", function () { + $this.trigger("change.validation", {includeEmpty: true}); + }); + return {maxchecked: $this.data("validation" + name + "Maxchecked"), elements: elements}; + }, + validate: function ($this, value, validator) { + return (validator.elements.filter(":checked").length > validator.maxchecked && !validator.negative) + || (validator.elements.filter(":checked").length <= validator.maxchecked && validator.negative); + }, + blockSubmit: true + }, + minchecked: { + name: "minchecked", + init: function ($this, name) { + var elements = $this.parents("form").first().find("[name=\"" + $this.attr("name") + "\"]"); + elements.bind("click.validation", function () { + $this.trigger("change.validation", {includeEmpty: true}); + }); + return {minchecked: $this.data("validation" + name + "Minchecked"), elements: elements}; + }, + validate: function ($this, value, validator) { + return (validator.elements.filter(":checked").length < validator.minchecked && !validator.negative) + || (validator.elements.filter(":checked").length >= validator.minchecked && validator.negative); + }, + blockSubmit: true + } + }, + builtInValidators: { + email: { + name: "Email", + type: "shortcut", + shortcut: "validemail" + }, + validemail: { + name: "Validemail", + type: "regex", + regex: "[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\\.[A-Za-z]{2,4}", + message: "Not a valid email address<!-- data-validator-validemail-message to override -->" + }, + passwordagain: { + name: "Passwordagain", + type: "match", + match: "password", + message: "Does not match the given password<!-- data-validator-paswordagain-message to override -->" + }, + positive: { + name: "Positive", + type: "shortcut", + shortcut: "number,positivenumber" + }, + negative: { + name: "Negative", + type: "shortcut", + shortcut: "number,negativenumber" + }, + number: { + name: "Number", + type: "regex", + regex: "([+-]?\\\d+(\\\.\\\d*)?([eE][+-]?[0-9]+)?)?", + message: "Must be a number<!-- data-validator-number-message to override -->" + }, + integer: { + name: "Integer", + type: "regex", + regex: "[+-]?\\\d+", + message: "No decimal places allowed<!-- data-validator-integer-message to override -->" + }, + positivenumber: { + name: "Positivenumber", + type: "min", + min: 0, + message: "Must be a positive number<!-- data-validator-positivenumber-message to override -->" + }, + negativenumber: { + name: "Negativenumber", + type: "max", + max: 0, + message: "Must be a negative number<!-- data-validator-negativenumber-message to override -->" + }, + required: { + name: "Required", + type: "required", + message: "This is required<!-- data-validator-required-message to override -->" + }, + checkone: { + name: "Checkone", + type: "minchecked", + minchecked: 1, + message: "Check at least one option<!-- data-validation-checkone-message to override -->" + } + } + }; + + var formatValidatorName = function (name) { + return name + .toLowerCase() + .replace( + /(^|\s)([a-z])/g, + function (m, p1, p2) { + return p1 + p2.toUpperCase(); + } + ) + ; + }; + + var getValue = function ($this) { + // Extract the value we're talking about + var value = $this.val(); + var type = $this.attr("type"); + if (type === "checkbox") { + value = ($this.is(":checked") ? value : ""); + } + if (type === "radio") { + value = ($('input[name="' + $this.attr("name") + '"]:checked').length > 0 ? value : ""); + } + return value; + }; + + function regexFromString(inputstring) { + return new RegExp("^" + inputstring + "$"); + } + + /** + * Thanks to Jason Bunting via StackOverflow.com + * + * http://stackoverflow.com/questions/359788/how-to-execute-a-javascript-function-when-i-have-its-name-as-a-string#answer-359910 + * Short link: http://tinyurl.com/executeFunctionByName + **/ + function executeFunctionByName(functionName, context /*, args*/) { + var args = Array.prototype.slice.call(arguments).splice(2); + var namespaces = functionName.split("."); + var func = namespaces.pop(); + for (var i = 0; i < namespaces.length; i++) { + context = context[namespaces[i]]; + } + return context[func].apply(this, args); + } + + $.fn.jqBootstrapValidation = function (method) { + + if (defaults.methods[method]) { + return defaults.methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); + } else if (typeof method === 'object' || !method) { + return defaults.methods.init.apply(this, arguments); + } else { + $.error('Method ' + method + ' does not exist on jQuery.jqBootstrapValidation'); + return null; + } + + }; + + $.jqBootstrapValidation = function (options) { + $(":input").not("[type=image],[type=submit]").jqBootstrapValidation.apply(this, arguments); + }; + +})(jQuery); diff --git a/portal/src/main/webapp/extsys/vim/js/vim-validate.js b/portal/src/main/webapp/extsys/vim/js/vim-validate.js new file mode 100644 index 0000000..2297458 --- /dev/null +++ b/portal/src/main/webapp/extsys/vim/js/vim-validate.js @@ -0,0 +1,116 @@ +/* + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ +/** + * Created by 10184303 on 15-11-17. + */ +var form = $('#vim_form'); +var error = $('.alert-danger', form); +var success = $('.alert-success', form); +form.validate({ + doNotHideMessage: true, //this option enables to show the error/success messages on tab switch. + errorElement: 'span', //default input error message container + errorClass: 'help-block', // default input error message class + focusInvalid: false, // do not focus the last invalid input + rules: { + url: { + required: true, + url: true, + maxlength: 50 + //,repeatedName: true + }, + vimName: { + required: true, + maxlength: 20 + }, + version: { + required: true, + maxlength: 20 + }, + vendor: { + required: true, + maxlength: 20 + }, + userName: { + required: true, + maxlength: 20 + }, + password: { + required: true, + maxlength: 20 + }, + tenant: { + required: true, + maxlength: 20 + } + }, + messages: { + url: { + //required: $.i18n.prop('com_zte_ums_zenic_topology_connectmanager_enter_name') + required: $.i18n.prop('com_zte_ums_eco_roc_vim_auth_url_require_message'), + url: $.i18n.prop('com_zte_ums_eco_roc_vim_auth_url_alarm_message') + }, + vimName: { + required: $.i18n.prop('com_zte_ums_eco_roc_vim_name_alarm_message') + }, + userName: { + required: $.i18n.prop('com_zte_ums_eco_roc_vim_username_alarm_message') + }, + password: { + required: $.i18n.prop('com_zte_ums_eco_roc_vim_password_alarm_message') + }, + version: { + required: $.i18n.prop('com_zte_ums_eco_roc_vim_version_alarm_message') + }, + vendor: { + required: $.i18n.prop('com_zte_ums_eco_roc_vim_vendor_alarm_message') + }, + tenant: { + required: $.i18n.prop('com_zte_ums_eco_roc_vim_tenant_alarm_message') + } + }, + errorPlacement: function (error, element) { // render error placement for each input type + error.insertAfter(element); // for other inputs, just perform default behavior + }, + + invalidHandler: function (event, validator) { //display error alert on form submit + success.hide(); + error.show(); + //ZteFrameWork.scrollTo(error, -200); + }, + + highlight: function (element) { // hightlight error inputs + $(element) + .closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group + }, + + unhighlight: function (element) { // revert the change done by hightlight + $(element) + .closest('.form-group').removeClass('has-error'); // set error class to the control group + }, + + success: function (label) { + label + .addClass('valid') // mark the current input as valid and display OK icon + .closest('.form-group').removeClass('has-error'); // set success class to the control group + }, + + submitHandler: function (form) { + success.show(); + error.hide(); + //add here some ajax code to submit your form or just call form.submit() if you want to submit the form without ajax + } + +}); diff --git a/portal/src/main/webapp/extsys/vim/js/vimChart.js b/portal/src/main/webapp/extsys/vim/js/vimChart.js new file mode 100644 index 0000000..078a7e6 --- /dev/null +++ b/portal/src/main/webapp/extsys/vim/js/vimChart.js @@ -0,0 +1,430 @@ +/* + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ +var vimChart = {}; + + +var labelTop = { + normal: { + label: { + show: true, + position: 'outer', + formatter: function (params) { + var total = params.series.data[1].value + params.series.data[0].value; + var util = params.series.data[0].util; + return $.i18n.prop('com_zte_ums_eco_roc_vim_resource_chart_used') + params.value + util + "\n" + + $.i18n.prop('com_zte_ums_eco_roc_vim_resource_chart_total') + total + util; + }, + textStyle: { + baseline: 'bottom', + fontWeight: 'normal' + + } + }, + labelLine: { + show: true + } + } +}; + + +var labelFromatter = { + normal: { + label: { + formatter: function (params) { + return params.series.data[0].name + "\n" + (100 - params.percent).toFixed(0) + '%' + }, + textStyle: { + baseline: 'center', + color: "#000", + fontWeight: 'bold' + + + } + } + } +} +var labelBottom = { + normal: { + color: '#ccc', + label: { + show: true, + position: 'center' + }, + labelLine: { + show: false + } + }, + emphasis: { + color: 'rgba(0,0,0,0)' + } +}; + +var radius = [40, 55]; + +var vimPieChart; + +vimChart.vimPieChartInit = function () { + vimPieChart = echarts.init(document.getElementById('vimPieChartDiv')); + vimPieChart.showLoading({ + text: "Loading", + effect: "whirling", + textStyle: { + fontSize: 20 + } + }); + +} + +vimChart.vimPieChart = function (data) { + + var option = { + animation: true, + legend: { + x: 'left', + y: "top", + data: [ + $.i18n.prop('com_zte_ums_eco_roc_vim_resource_vim_cpu'), + $.i18n.prop('com_zte_ums_eco_roc_vim_resource_vim_memory'), + $.i18n.prop('com_zte_ums_eco_roc_vim_resource_vim_disk') + ], + orient: 'vertical' + }, + color: ["#578ebe", "#44b6ae", "#DABA36"], + title: { + text: '', + subtext: '', + x: 'center' + }, + toolbox: { + show: true, + + feature: { + saveAsImage: { + show: true, + title: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_chart_save_picture'), + type: 'png', + lang: [$.i18n.prop('com_zte_ums_eco_roc_vim_resource_chart_click_save')] + } + } + }, + series: [ + { + type: 'pie', + center: ['15%', '55%'], + radius: radius, + itemStyle: labelFromatter, + data: [ + { + name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_vim_cpu'), + value: data.usage.cpu, + itemStyle: labelTop, + util: '' + }, + {name: 'other', value: data.resource.cpu - data.usage.cpu, itemStyle: labelBottom} + + ] + }, + { + type: 'pie', + center: ['40%', '55%'], + radius: radius, + itemStyle: labelFromatter, + data: [ + { + name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_vim_memory'), + value: data.usage.memoryMb, + itemStyle: labelTop, + util: 'MB' + }, + {name: 'other', value: data.resource.memoryMb - data.usage.memoryMb, itemStyle: labelBottom} + + ] + }, + { + type: 'pie', + center: ['65%', '55%'], + radius: radius, + itemStyle: labelFromatter, + data: [ + { + name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_vim_disk'), + value: data.usage.diskGb, + itemStyle: labelTop, + util: 'GB' + }, + {name: 'other', value: data.resource.diskGb - data.usage.diskGb, itemStyle: labelBottom} + + ] + } + + ] + }; + + + + vimPieChart.hideLoading(); + vimPieChart.setOption(option); + window.onresize = vimPieChart.resize; + + +} + +vimChart.getPieCenter = function (n) { + var center; + switch (n) { + case 1: + center = ['15%', '30%']; + break; + case 2: + center = ['40%', '30%']; + break; + case 3: + center = ['65%', '30%']; + break; + case 4: + center = ['15%', '80%']; + break; + case 5: + center = ['40%', '80%']; + break; + case 6: + center = ['65%', '80%']; + break; + case 7: + center = ['90%', '80%']; + break; + + } + return center; +} + + +var tenantPieChart; +vimChart.tenantPieChartInit = function () { + tenantPieChart = echarts.init(document.getElementById('tenantPieChartDiv')); + + tenantPieChart.showLoading({ + text: "Loading", + effect: "whirling", + textStyle: { + fontSize: 20 + } + }); +} +vimChart.tenantPieChart = function (data) { + + var legend_data = new Array(); + var series = new Array(); + var n = 0; + + if (data.quota.instances != -1) { + n++; + + legend_data.push($.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_instances')); + var instances_series = { + type: 'pie', + center: vimChart.getPieCenter(n), + radius: radius, + itemStyle: labelFromatter, + data: [ + { + name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_instances'), + value: data.usage.instances, + itemStyle: labelTop, + util: '' + }, + {name: 'other', value: data.quota.instances - data.usage.instances, itemStyle: labelBottom} + + ] + }; + series.push(instances_series); + + } + if (data.quota.cpu != -1) { + n++; + legend_data.push($.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_cpu')); + var cpu_series = { + type: 'pie', + center: vimChart.getPieCenter(n), + radius: radius, + itemStyle: labelFromatter, + data: [ + { + name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_cpu'), + value: data.usage.cpu, + itemStyle: labelTop, + util: '' + }, + {name: 'other', value: data.quota.cpu - data.usage.cpu, itemStyle: labelBottom} + + ] + }; + series.push(cpu_series); + } + if (data.quota.memoryMb != -1) { + n++; + legend_data.push($.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_memoryMb')); + var memoryMb_series = { + type: 'pie', + center: vimChart.getPieCenter(n), + radius: radius, + itemStyle: labelFromatter, + data: [ + { + name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_memoryMb'), + value: data.usage.memoryMb, + itemStyle: labelTop, + util: 'MB' + }, + {name: 'other', value: data.quota.memoryMb - data.usage.memoryMb, itemStyle: labelBottom} + + ] + }; + series.push(memoryMb_series); + } + if (data.quota.floatingIps != -1) { + n++; + legend_data.push($.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_floatingIps')); + var floatingIps_series = { + type: 'pie', + center: vimChart.getPieCenter(n), + radius: radius, + itemStyle: labelFromatter, + data: [ + { + name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_floatingIps'), + value: data.usage.floatingIps, + itemStyle: labelTop, + util: '' + }, + {name: 'other', value: data.quota.floatingIps - data.usage.floatingIps, itemStyle: labelBottom} + + ] + }; + series.push(floatingIps_series); + } + if (data.quota.securityGroups != -1) { + n++; + legend_data.push($.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_securityGroups')); + var securityGroups_series = { + type: 'pie', + center: vimChart.getPieCenter(n), + radius: radius, + itemStyle: labelFromatter, + data: [ + { + name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_securityGroups'), + value: data.usage.securityGroups, + itemStyle: labelTop, + util: '' + }, + {name: 'other', value: data.quota.securityGroups - data.usage.securityGroups, itemStyle: labelBottom} + + ] + }; + series.push(securityGroups_series); + } + if (data.quota.volumes != -1) { + n++; + legend_data.push($.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_volumes')); + var volumes_series = { + type: 'pie', + center: vimChart.getPieCenter(n), + radius: radius, + itemStyle: labelFromatter, + data: [ + { + name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_volumes'), + value: data.usage.volumes, + itemStyle: labelTop, + util: '' + }, + {name: 'other', value: data.quota.volumes - data.usage.volumes, itemStyle: labelBottom} + + ] + }; + series.push(volumes_series); + } + if (data.quota.volumeStorage != -1) { + n++; + legend_data.push($.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_volumeStorage')); + var volumeStorage_series = { + type: 'pie', + center: vimChart.getPieCenter(n), + radius: radius, + itemStyle: labelFromatter, + data: [ + { + name: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_tenant_volumeStorage'), + value: data.usage.volumeStorage, + itemStyle: labelTop, + util: 'GB' + }, + {name: 'other', value: data.quota.volumeStorage - data.usage.volumeStorage, itemStyle: labelBottom} + + ] + }; + series.push(volumeStorage_series); + } + + + var option = { + animation: true, + legend: { + x: 'left', + y: "top", + data: legend_data, + orient: 'vertical' + }, + color: ["#578ebe", "#44b6ae", "#DABA36", "#F79695", "#9699e0", "#57b5e3", "#48c79c"], + title: { + text: '', + subtext: '', + x: 'center' + }, + toolbox: { + show: true, + feature: { + saveAsImage: { + show: true, + title: $.i18n.prop('com_zte_ums_eco_roc_vim_resource_chart_save_picture'), + type: 'png', + lang: [$.i18n.prop('com_zte_ums_eco_roc_vim_resource_chart_click_save')] + } + } + }, + series: series + }; + + + + tenantPieChart.hideLoading(); + tenantPieChart.setOption(option); + window.onresize = tenantPieChart.resize; + + +} + +vimChart.growl = function (message, type) { + $.growl({ + icon: "fa fa-envelope-o fa-lg", + title: " " + $.i18n.prop('com_zte_ums_eco_roc_vim_title_notice'), + message: message + " " + }, { + type: type, + delay: 0 + }); +}
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/vim/js/vimChartController.js b/portal/src/main/webapp/extsys/vim/js/vimChartController.js new file mode 100644 index 0000000..cdfaa40 --- /dev/null +++ b/portal/src/main/webapp/extsys/vim/js/vimChartController.js @@ -0,0 +1,160 @@ +/* + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ +var vm = avalon + .define({ + $id: "vimChartController", + $vimChartUrl: '../../api/vim/v1/{vim_id}/resource', + $tenantChartUrl: '../../api/vim/v1/{vim_id}/resource/{tenant_name}', + $tenantListUrl: '../../api/vim/v1/{vim_id}/tenants', + $tenantRoleUrl: '../../api/vim/v1/{vim_id}/roles', + vimInfo: { + name: name, + id: id, + tenant: tenant, + isAdmin: true + }, + tenantSelectList: { + condName: $.i18n.prop("com_zte_ums_eco_roc_vim_type"), + component_type: 'select', + selectItems: [] + }, + initChart: function () { + + //has admin role + var tenantRoleUrl = vm.$tenantRoleUrl.replace("{vim_id}", vm.vimInfo.id); + $.ajax({ + "type": 'get', + "url": tenantRoleUrl, + "dataType": "json", + success: function (resp) { + vm.vimInfo.isAdmin = (resp == null) ? false : resp.isAdminRole; + + }, + error: function (XMLHttpRequest, textStatus, errorThrown) { + vimChart.growl("get [tenant Role] is error ：" + textStatus + ":" + errorThrown, "danger"); + }, + complete: function () { + if (vm.vimInfo.isAdmin == true) { + + //get all resource + vm.vimChartLoad(); + + //get tenant list + vm.vimListLoad(); + } + + } + }); + //get resource of tenant + vm.tenantChartLoad(); + }, + gotoVimPage: function () { + window.parent.ZteFrameWork.goToURLByIDAndNewAction('eco_roc_vimmgr'); + }, + vimListLoad: function () { + var tenantListUrl = vm.$tenantListUrl.replace("{vim_id}", vm.vimInfo.id); + $.ajax({ + "type": 'get', + "url": tenantListUrl, + "dataType": "json", + success: function (resp) { + vm.tenantSelectList.selectItems = (resp == null) ? [] : resp; + }, + error: function (XMLHttpRequest, textStatus, errorThrown) { + vimChart.growl("get [tenant List] is error ：" + textStatus + ":" + errorThrown, "danger"); + } + }); + }, + vimChartLoad: function () { + var viminitData = { + "resource": { + "cpu": 0, + "memoryMb": 503, + "diskGb": 9.8 + }, + "usage": { + "cpu": 0, + "memoryMb": 0, + "diskGb": 0 + } + } + + vimChart.vimPieChartInit(); + + var vimChartUrl = vm.$vimChartUrl.replace("{vim_id}", vm.vimInfo.id); + + + $.ajax({ + "type": 'get', + "url": vimChartUrl, + "dataType": "json", + success: function (resp) { + var vimData = (resp == null) ? viminitData : resp; + vimChart.vimPieChart(vimData); + }, + error: function (XMLHttpRequest, textStatus, errorThrown) { + vimChart.growl("get [virtual machine manager resource using status] is error ：" + textStatus + ":" + errorThrown, "danger"); + } + }); + + }, + tenantChartLoad: function () { + var tenantChartUrl = vm.$tenantChartUrl.replace("{vim_id}", vm.vimInfo.id).replace("{tenant_name}", vm.vimInfo.tenant); + + var tenantinitData = { + "tenant_name": "", + "errormsg": "", + "quota": { + "cpu": 0, + "memoryMb": 0, + "instances": 0, + "floatingIps": 0, + "securityGroups": 0, + "volumeStorage": 0, + "volumes": 0 + }, + "usage": { + "cpu": 0, + "memoryMb": 0, + "instances": 0, + "floatingIps": 0, + "securityGroups": 0, + "volumeStorage": 0, + "volumes": 0 + } + }; + vimChart.tenantPieChartInit(); + $.ajax({ + "type": 'get', + "url": tenantChartUrl, + "dataType": "json", + success: function (resp) { + var tenantData = (resp == null) ? tenantinitData : resp; + if (tenantData.errormsg != null) { + vimChart.growl(tenantData.errormsg, "danger"); + } + vimChart.tenantPieChart(tenantData); + }, + error: function (XMLHttpRequest, textStatus, errorThrown) { + vimChart.growl("get [tenant quota using status] occur error ：" + textStatus + ":" + errorThrown, "danger"); + } + }); + + } + + }); +avalon.scan(); +vm.initChart();
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/vim/js/vimController.js b/portal/src/main/webapp/extsys/vim/js/vimController.js new file mode 100644 index 0000000..486936c --- /dev/null +++ b/portal/src/main/webapp/extsys/vim/js/vimController.js @@ -0,0 +1,267 @@ +/* + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ +var vm = avalon + .define({ + $id: "vimController", + vimInfo: [], + executeWait: {clazz: 'alert-info', visible: true, text: $.i18n.prop('com_zte_ums_eco_roc_vim_checking_status')}, + executeError: {clazz: 'alert-danger', visible: true, text: 'error'}, + currentElement: {}, + currentIndex: -1, + saveType: "add", + modalTitle: $.i18n.prop('com_zte_ums_eco_roc_vim_register'), + $blankElement: { + "cloud-owner": "ZTE", + "status": "active", + "cloud-region-id": "", + "cloud-type": "openstack", + "cloud-region-version": "v1.0", + "owner-defined-type": "", + "cloud-zone": "", + "complex-name": "", + "cloud-extra-info": "", + "auth-info-items": [ + { + "username": "", + "password": "", + "auth-url": "", + "ssl-cacert": "", + "ssl-insecure": "", + "cloud-domain": "" + } + ] + }, + $Status: { + success: "active", + failed: "inactive", + displayActive: $.i18n.prop('com_zte_ums_eco_roc_vim_normal'), + displayInactive: $.i18n.prop('com_zte_ums_eco_roc_vim_abnormal') + }, + isSave: true, + action: {ADD: 'add', UPDATE: 'update'}, + $queryVimInfoUrl: 'mock-data/vim.json',//'/onapapi/aai/esr/v1/vims', + $addVimInfoUrl: '/onapapi/aai/esr/v1/vims/', + $updateVimInfoUrl: '/onapapi/aai/esr/v1/vims/', + $delVimInfoUrl: '/onapapi/aai/esr/v1/vims/{vim_id}', + $initTable: function () { + $.ajax({ + "type": 'get', + "url": vm.$queryVimInfoUrl, + "success": function (resp, statusText, jqXHR) { + if (jqXHR.status == "200") { + vm.vimInfo = resp; + } + else { + vm.vimInfo = []; + bootbox.alert($.i18n.prop("com_zte_ums_eco_roc_vim_growl_msg_query_failed")); + return; + } + }, + error: function (XMLHttpRequest, textStatus, errorThrown) { + bootbox.alert($.i18n.prop("com_zte_ums_eco_roc_vim_growl_msg_query_failed") + textStatus + ":" + errorThrown); + return; + }, + complete: function () { + resUtil.tooltipVimStatus(); + } + }); + + }, + $showVimTable: function (index, action) { + vm.isSave = false; + vm.currentIndex = index; + vm.saveType = action; + if (vm.action.ADD == action) { + vm.modalTitle = $.i18n.prop('com_zte_ums_eco_roc_vim_register'); + vm.fillElement(vm.$blankElement, vm.currentElement); + } else { + vm.modalTitle = $.i18n.prop('com_zte_ums_eco_roc_vim_modify_info'); + vm.fillElement(vm.vimInfo[index], vm.currentElement); + } + vm.$showModal(); + }, + $showModal: function () { + $(".form-group").removeClass('has-success').removeClass('has-error').find(".help-block[id]").remove(); + $("#addVimDlg").modal("show"); + }, + $hideModal: function () { + $(".form-group").removeClass('has-success').removeClass('has-error').find(".help-block[id]").remove(); + $("#addVimDlg").modal("hide"); + }, + $saveVimTable: function (index) { + vm.isSave = true; + if (form.valid() == false) { + vm.isSave = false; + return false; + } + var res = false; + if (vm.saveType == "add") { + res = vm.persistVim(); + } else if (vm.saveType == "update") { + res = vm.updateVim(); + } + if(res){ + vm.$hideModal(); + } + }, + //add vim + persistVim: function () { + var newElement = vm.getVIMSave(); + vm.vimInfo.push(newElement); + return true; + /*$.ajax({ + type: "Post", + url: vm.$addVimInfoUrl, + data: JSON.stringify(vm.currentElement.$model), + async: false, + dataType: "json", + contentType: 'application/json', + success: function (data, statusText, jqXHR) { + vm.executeWait.visible = false; + vm.executeError.visible = false; + if (jqXHR.status == "201") { + vm.addVim.vimId = data.vimId; + vm.addVim.name = data.name; + vm.addVim.tenant = data.tenant; + vm.addVim.type = data.type; + var newVim = jQuery.extend({}, vm.addVim); + vm.vimInfo.push(newVim); + + $('#addVimDlg').modal('hide'); + resUtil.growl($.i18n.prop("com_zte_ums_eco_roc_vim_growl_msg_title") + $.i18n.prop("com_zte_ums_eco_roc_vim_growl_msg_save_success"), "success"); + } else { + vm.executeError.visible = true; + vm.executeError.text = $.i18n.prop("com_zte_ums_eco_roc_vim_growl_msg_save_failed"); + } + }, + error: function (XMLHttpRequest, textStatus, errorThrown) { + vm.executeError.visible = true; + vm.executeError.text = textStatus + ":" + errorThrown; + vm.executeWait.visible = false; + vm.isSave = false; + } + });*/ + }, + //update vim + updateVim: function () { + vm.fillElement(vm.getVIMSave(), vm.vimInfo[vm.currentIndex]); + return true; + /* $.ajax({ + type: "Put", + url: vm.$updateVimInfoUrl + vm.addVim.vimId, + contentType: 'application/json', + data: JSON.stringify(vm.currentElement.$model), + dataType: "json", + async: false, + success: function (data, statusText, jqXHR) { + vm.executeWait.visible = false; + vm.executeError.visible = false; + if (jqXHR.status == "200") { + for (var i = 0; i < vm.vimInfo.length; i++) { + if (vm.vimInfo[i].vimId == vm.addVim.vimId) { + vm.vimInfo[i].name = vm.addVim.vimName; + vm.vimInfo[i].userName = vm.addVim.userName; + vm.vimInfo[i].password = vm.addVim.password; + vm.vimInfo[i].url = vm.addVim.url; + vm.vimInfo[i].tenant = vm.addVim.tenant; + vm.vimInfo[i].domain = vm.addVim.domain; + vm.vimInfo[i].description = vm.addVim.description; + vm.vimInfo[i].type = vm.addVim.vimType; + vm.vimInfo[i].version=vm.addVim.version; + vm.vimInfo[i].vendor=vm.addVim.vendor; + } + } + $('#addVimDlg').modal('hide'); + resUtil.growl($.i18n.prop('com_zte_ums_eco_roc_vim_growl_msg_title') + $.i18n.prop('com_zte_ums_eco_roc_vim_growl_msg_save_success'), "success"); + } + else { + vm.executeError.visible = true; + vm.executeError.text = $.i18n.prop('com_zte_ums_eco_roc_vim_growl_msg_save_failed'); + } + }, + error: function (XMLHttpRequest, textStatus, errorThrown) { + vm.isSave = false; + vm.executeError.visible = true; + vm.executeError.text = textStatus + ":" + errorThrown; + vm.executeWait.visible = false; + } + });*/ + }, + delVim: function (index) { + bootbox.confirm($.i18n.prop('com_zte_ums_eco_roc_vim_confirm_delete_vim_record'), function (result) { + if (result) { + var id = vm.vimInfo[index]["id"]; + vm.vimInfo.splice(index, 1); + /* $.ajax({ + type: "DELETE", + url: vm.$delVimInfoUrl.replace('{vim_id}', el.vimId), + success: function (data, statusText, jqXHR) { + if (jqXHR.status == "204") { + for (var i = 0; i < vm.vimInfo.length; i++) { + if (el.vimId == vm.vimInfo[i].vimId) { + vm.vimInfo.splice(i, 1); + break; + } + } + resUtil.growl($.i18n.prop('com_zte_ums_eco_roc_vim_growl_msg_title') + $.i18n.prop('com_zte_ums_eco_roc_vim_growl_msg_remove_success'), "success"); + } + else { + resUtil.growl($.i18n.prop('com_zte_ums_eco_roc_vim_growl_msg_title') + $.i18n.prop('com_zte_ums_eco_roc_vim_growl_msg_remove_failed'), "warning"); + } + }, + error: function (XMLHttpRequest, textStatus, errorThrown) { + resUtil.growl($.i18n.prop('com_zte_ums_eco_roc_vim_growl_msg_title') + errorThrown, "danger"); + } + });*/ + } + }); + }, + fillElement: function (sourceElement, targetElement) { + targetElement["cloud-owner"] = sourceElement["cloud-owner"]; + targetElement["status"] = sourceElement["status"]; + targetElement["cloud-region-id"] = sourceElement["cloud-region-id"]; + targetElement["cloud-type"] = sourceElement["cloud-type"]; + targetElement["cloud-region-version"] = sourceElement["cloud-region-version"]; + targetElement["owner-defined-type"] = sourceElement["owner-defined-type"]; + targetElement["cloud-zone"] = sourceElement["cloud-zone"]; + targetElement["complex-name"] = sourceElement["complex-name"]; + targetElement["cloud-extra-info"] = sourceElement["cloud-extra-info"]; + if(!targetElement["auth-info-items"]){ + targetElement["auth-info-items"] = [{}]; + } + targetElement["auth-info-items"][0]["username"] = sourceElement["auth-info-items"][0]["username"]; + targetElement["auth-info-items"][0]["password"] = sourceElement["auth-info-items"][0]["password"]; + targetElement["auth-info-items"][0]["auth-url"] = sourceElement["auth-info-items"][0]["auth-url"]; + targetElement["auth-info-items"][0]["ssl-cacert"] = sourceElement["auth-info-items"][0]["ssl-cacert"]; + targetElement["auth-info-items"][0]["ssl-insecure"] = sourceElement["auth-info-items"][0]["ssl-insecure"]; + targetElement["auth-info-items"][0]["cloud-domain"] = sourceElement["auth-info-items"][0]["cloud-domain"]; + }, + getVIMSave: function () { + var vimSave = $.extend(true, {}, vm.currentElement.$model); + vimSave["auth-info-items"] = $.extend(true, {}, vm.currentElement["auth-info-items"].$model); + return vimSave; + }, + gotoChartPage: function (oid, name, tenant) { + window.location.href = "vimChart.html?" + oid + "&" + name + "&" + tenant; + } + }); +vm.currentElement = $.extend(true, {}, vm.$blankElement); +avalon.scan(); +vm.$initTable(); + + + + diff --git a/portal/src/main/webapp/extsys/vim/js/vimUtil.js b/portal/src/main/webapp/extsys/vim/js/vimUtil.js new file mode 100644 index 0000000..610a266 --- /dev/null +++ b/portal/src/main/webapp/extsys/vim/js/vimUtil.js @@ -0,0 +1,51 @@ +/* + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ +var resUtil = {}; + +resUtil.tooltipVimStatus = function () { + $("[data-toggle='tooltip']").tooltip(); + +} + +resUtil.growl = function (message, type) { + $.growl({ + icon: "fa fa-envelope-o fa-lg", + title: " Notice: ", + message: message + " " + }, { + type: type + }); + /* + $.bootstrapGrowl(message, { + ele: 'body', // which element to append to + type: type, // (null, 'info', 'danger', 'success') + offset: {from: 'bottom', amount: 20}, // 'top', or 'bottom' + align: 'right', // ('left', 'right', or 'center') + width: 'auto', // (integer, or 'auto') + delay: 3000, // Time while the message will be displayed. It's not equivalent to the *demo* timeOut! + allow_dismiss: false, // If true then will display a cross to close the popup. + stackup_spacing: 10 // spacing between consecutively stacked growls. + }); + */ +} + + + + + + + + diff --git a/portal/src/main/webapp/extsys/vim/mock-data/vim.json b/portal/src/main/webapp/extsys/vim/mock-data/vim.json new file mode 100644 index 0000000..d18b74f --- /dev/null +++ b/portal/src/main/webapp/extsys/vim/mock-data/vim.json @@ -0,0 +1,44 @@ +[
+ {
+ "cloud-owner": "ZTE",
+ "status": "active",
+ "cloud-region-id": "region-one",
+ "cloud-type": "openstack",
+ "cloud-region-version": "v1.0",
+ "owner-defined-type": "owner-defined-type",
+ "cloud-zone": "cloud zone",
+ "complex-name": "complex name",
+ "cloud-extra-info": "cloud-extra-info",
+ "auth-info-items": [
+ {
+ "username": "admin",
+ "password": "admin",
+ "auth-url": "http://10.74.151.13:5000/v2.0",
+ "ssl-cacert": "ssl-cacert",
+ "ssl-insecure": "ssl-insecure",
+ "cloud-domain": "cloud-domain"
+ }
+ ]
+ },
+ {
+ "cloud-owner": "ZTE",
+ "status": "inactive",
+ "cloud-region-id": "region-one",
+ "cloud-type": "openstack",
+ "cloud-region-version": "v1.0",
+ "owner-defined-type": "owner-defined-type",
+ "cloud-zone": "cloud zone",
+ "complex-name": "complex name",
+ "cloud-extra-info": "cloud-extra-info",
+ "auth-info-items": [
+ {
+ "username": "admin",
+ "password": "admin",
+ "auth-url": "http://10.74.151.13:5000/v2.0",
+ "ssl-cacert": "ssl-cacert",
+ "ssl-insecure": "ssl-insecure",
+ "cloud-domain": "cloud-domain"
+ }
+ ]
+ }
+]
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/vim/vimChart.html b/portal/src/main/webapp/extsys/vim/vimChart.html new file mode 100644 index 0000000..c6fe522 --- /dev/null +++ b/portal/src/main/webapp/extsys/vim/vimChart.html @@ -0,0 +1,118 @@ +<!DOCTYPE html> +<!-- + + Copyright 2016-2017 ZTE Corporation. + + 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. + +--> +<html> +<head lang="en"> + <meta charset="UTF-8"> + <title></title> + <link href="../../thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/> + <link href="../../thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/> + <link href="../../thirdparty/css/ngict-component.css" rel="stylesheet" type="text/css"> + <link href="../../thirdparty/css/ZteIctIcons/style.css" rel="stylesheet" type="text/css"> + <link href="../../thirdparty/animate/animate.min.css" rel="stylesheet" type="text/css"/> + <link href="css/vimChart.css" rel="stylesheet" type="text/css"/> + <style> + .ms-controller { + visibility: hidden + } + </style> + <script> + var id, name, tenant; + if (window.location.search && window.location.search.length > 1) { + var arr = window.location.search.split("&"); + id = arr[0].replace("?", ""); + name = arr[1]; + tenant = arr[2]; + } + </script> +</head> +<body> +<div class="ms-controller" ms-controller="vimChartController"> + <div class="container-fluid"> + + <div class="row" style=" margin-top: 15px;"> + <div class="col-xs-6 col-md-6 col-sm-6 col-lg-6 titlefont"> + {{vimInfo.name}}<span id_i18n="com_zte_ums_eco_roc_vim_resource_use" + name_i18n="com_zte_conductor_ui_i18n"></span> + </div> + <div class="pull-right"> + <a href="#" ms-click="gotoVimPage()" id_i18n="com_zte_ums_eco_roc_vim_resource_chart_return" + name_i18n="com_zte_conductor_ui_i18n"></a> + + </div> + </div> + <div class="separator-line"></div> + + <div class="row row-fluid"> + + <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 " ms-if="vimInfo.isAdmin==true"> + + <div class="form-body"> + <div class="form-title"> + <span id_i18n="com_zte_ums_eco_roc_vim_resource_vim_use" + name_i18n="com_zte_conductor_ui_i18n"></span> + </div> + <div id="vimPieChartDiv" style="width:100%;height:200px" class="main"></div> + + </div> + </div> + + + <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 "> + <div class="form-body"> + <div class="form-title"> + {{vimInfo.tenant}}<span id_i18n="com_zte_ums_eco_roc_vim_resource_tenant_use" + name_i18n="com_zte_conductor_ui_i18n"></span> + <div class="pull-right"> + <select class="form-control m-b" ms-if="vimInfo.isAdmin==true" + ms-each="tenantSelectList.selectItems" ms-duplex="vimInfo.tenant" + ms-change="tenantChartLoad()"> + <option ms-attr-value='el.name'>{{el.name}}</option> + </select> + + + </div> + </div> + + <div id="tenantPieChartDiv" style="width:100%;height:400px" class="main"></div> + + </div> + + </div> + + </div> + + </div> + + +</div> + +<script type="text/javascript" src="../../thirdparty/jquery/jquery-1.10.2.min.js"></script> +<script type="text/javascript" src="../../thirdparty/js/tools.js"></script> +<script type="text/javascript" src="../../thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script> +<script type="text/javascript" src="../../thirdparty/bootstrap/js/bootstrap.min.js"></script> +<script src="../../thirdparty/bootstrap-growl/bootstrap-growl.min.js"></script> +<script type="text/javascript" src="./i18n/loadi18nApp.js"></script> +<script src="../../thirdparty/echarts/echarts-all.js"></script> +<script type="text/javascript" src="../../thirdparty/bootbox/bootbox.min.js"></script> +<script src="../../thirdparty/avalon/avalon.js"></script> +<script type="text/javascript" src="js/vimChart.js"></script> +<script type="text/javascript" src="js/vimChartController.js"></script> +<script type="text/javascript" src="../../thirdparty/js/core/hk.min.js"></script> +</body> +</html>
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/vim/vimView.html b/portal/src/main/webapp/extsys/vim/vimView.html new file mode 100644 index 0000000..ba67d45 --- /dev/null +++ b/portal/src/main/webapp/extsys/vim/vimView.html @@ -0,0 +1,279 @@ +<!DOCTYPE html> +<!-- + + Copyright 2016-2017 ZTE Corporation. + + 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. + +--> +<html> +<head lang="en"> + <meta charset="UTF-8"> + <title></title> + <link href="../../thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet"/> + <link href="../../thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet"/> + <link href="../../thirdparty/uniform/css/uniform.default.css" rel="stylesheet"/> + <link href="../../thirdparty/css/ngict-component.css" rel="stylesheet" type="text/css"> + <link href="css/vim.css" rel="stylesheet" type="text/css"/> + <link href="css/skill.css" rel="stylesheet" type="text/css"/> + <link href="../../thirdparty/animate/animate.min.css" rel="stylesheet" type="text/css"/> + <style> + .ms-controller { + visibility: hidden + } + </style> +</head> +<body> +<div class="ms-controller container-fluid" ms-controller="vimController"> + + <div id="addVimDlg" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" + aria-hidden="true" data-backdrop="static"> + <div class="modal-dialog"> + <div class="modal-content Changepasswd"> + <div class="content"> + <div class="modal-header"> + <h4 id="myModalLabel">{{ modalTitle }}</h4> + </div> + <!-- modal body begin--> + <div class="modal-body"> + <!--<div class="alert alert-info" ms-visible="executeWait.visible">{{executeWait.text}}</div> + <div class="alert alert-danger " ms-visible="executeError.visible">{{executeError.text}}</div>--> + + <form class="form-horizontal" id="vim_form" role="form"> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>cloud-owner</span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="currentElement['cloud-owner']" name="cloudOwner" class="form-control"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>cloud-region-id</span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="currentElement['cloud-region-id']" name="cloudRegionId" class="form-control"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>cloud-type</span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <select ms-duplex="currentElement['cloud-type']"> + <option value='openstack'>openstack</option> + </select> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>cloud-region-version</span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="currentElement['cloud-region-version']" name="cloudRegionVersion" class="form-control"/> + <span class="help-block"></span> + </div> + + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>owner-defined-type</span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="currentElement['owner-defined-type']" name="ownerDefinedType" class="form-control"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>cloud-zone</span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="currentElement['cloud-zone']" name="cloudZone" class="form-control"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>complex-name</span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="currentElement['complex-name']" name="complexName" class="form-control"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>cloud-extra-info</span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="currentElement['cloud-extra-info']" name="cloudExtraInfo" class="form-control"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>username</span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="currentElement['auth-info-items'][0].username" name="username" class="form-control"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>password</span> + </label> + <div class="col-sm-7"> + <input type="password" ms-duplex="currentElement['auth-info-items'][0].password" name="password" class="form-control"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>auth-url</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="currentElement['auth-info-items'][0]['auth-url']" name="authUrl" class="form-control"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>ssl-cacert</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="currentElement['auth-info-items'][0]['ssl-cacert']" name="sslCacert" class="form-control"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>ssl-insecure</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="currentElement['auth-info-items'][0]['ssl-insecure']" name="sslInsecure" class="form-control"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>cloud-domain</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="currentElement['auth-info-items'][0]['cloud-domain']" name="cloudDomain" class="form-control"/> + <span class="help-block"></span> + </div> + </div> + </form> + </div> + <!-- modal body end--> + <div class="modal-footer"> + <button class="btn" data-dismiss="modal" aria-hidden="true"><span + id_i18n="com_zte_ums_eco_roc_vim_cancel" name_i18n="com_zte_conductor_ui_i18n"></span> + </button> + <button class="btn btn-primary" type="submit" ms-attr-disabled="isSave" ms-click="$saveVimTable()"> + <span id_i18n="com_zte_ums_eco_roc_vim_save" name_i18n="com_zte_conductor_ui_i18n"></span> + </button> + </div> + </div> + + </div> + </div> + </div> + + <div class="row-fluid col-sm-12" data-name="cond_zone"> + <div class="col-sm-4"> + <button class="btn white radius_l" id="app-new-btn" ms-click="$showVimTable(-1, 'add')"> + <i class="ict-new"></i> <span id_i18n="com_zte_ums_eco_roc_vim_register" + name_i18n="com_zte_conductor_ui_i18n"></span> + </button> + </div> + <!-- <div class="fa fa-refresh text-muted refresh-status-text"><small><span id_i18n="com_zte_ums_eco_roc_vim_status_update_time" name_i18n="com_zte_conductor_ui_i18n"></span></small><small ms-text="vimStatusTime"></small></div>--> + </div> + + <div class="row-fluid col-sm-12 " ms-each-el="vimInfo"> + <div class="col-sm-3 animated-panel zoomIn" style="-webkit-animation-delay: 0.1s;"> + <div class="hpanel stats"> + + <div class="panel-body h-200" ms-hover="hpanel_show"> + <div class="pull-left"> + <span class="label label-success" ms-text="$Status.displayActive"></span> + </div> + <div class="stats-icon pull-right"> + <i class="fa fa-cloud fa-5x color_cloud"></i> + </div> + <div class="m-t-xl"> + <h3 ms-text="el['cloud-owner'] + ':' + el['cloud-region-id']"></h3> + <div class="font"> + <span id_i18n="com_zte_ums_eco_roc_vim_display_type"name_i18n="com_zte_conductor_ui_i18n"></span> + <span ms-text="el['cloud-type']"></span> + </div> + <div class="font"> + <span id_i18n="com_zte_ums_eco_roc_vim_display_version"name_i18n="com_zte_conductor_ui_i18n"></span> + <span ms-text="el['cloud-region-version']"></span> + </div> + </div> + </div> + <div class="panel-footer"> + <div class="pull-right"> + <a class="btn btn-default btn-sm" ms-click="$showVimTable($index, 'update')"><i + class="fa fa-pencil-square-o fa-lg"></i></a> + <a class="btn btn-default btn-sm" ms-click="delVim($index)"><i class="fa fa-trash-o fa-lg"> </i></a> + <!--<a class="btn btn-default btn-sm" ms-click="gotoChartPage(el.oid,el.name,el.user)"><i class="fa fa-pie-chart fa-lg"> </i></a>--> + </div> + </div> + </div> + </div> + + </div> + <div class="row-fluid"> + <div class="col-md-12"> + <div class="pull-left text-muted"> + <small><span id_i18n="com_zte_ums_eco_roc_vim_total" name_i18n="com_zte_conductor_ui_i18n"></span> + <span class="blue-font" ms-text="vimInfo.size()"></span> + <span id_i18n="com_zte_ums_eco_roc_vim_metric" name_i18n="com_zte_conductor_ui_i18n"></span></small> + </div> + </div> + </div> + +</div> +<script type="text/javascript" src="../../thirdparty/jquery/jquery-1.10.2.min.js"></script> +<script type="text/javascript" src="../../thirdparty/js/tools.js"></script> +<script type="text/javascript" src="../../thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script> +<script type="text/javascript" src="../../thirdparty/bootstrap/js/bootstrap.min.js"></script> +<script type="text/javascript" src="../../thirdparty/jquery-validation/js/jquery.validate.js"></script> +<script type="text/javascript" src="../../thirdparty/jquery-validation/js/additional-methods.min.js"></script> +<script type="text/javascript" src="../../thirdparty/bootbox/bootbox.min.js"></script> +<script type="text/javascript" src="i18n/loadi18nApp.js"></script> +<script type="text/javascript" src="js/vim-validate.js"></script> +<script src="../../thirdparty/avalon/avalon.js"></script> +<script type="text/javascript" src="js/vimUtil.js"></script> +<script type="text/javascript" src="js/vimController.js"></script> +<script src="../../thirdparty/bootstrap-growl/bootstrap-growl.min.js"></script> +<script type="text/javascript" src="../../thirdparty/js/core/hk.min.js"></script> +</body> +</html>
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/vnfm/css/animate.min.css b/portal/src/main/webapp/extsys/vnfm/css/animate.min.css new file mode 100644 index 0000000..3b04801 --- /dev/null +++ b/portal/src/main/webapp/extsys/vnfm/css/animate.min.css @@ -0,0 +1,21 @@ +/** + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ +@charset "UTF-8";/*! +Animate.css - http://daneden.me/animate +Licensed under the MIT license - http://opensource.org/licenses/MIT + +Copyright (c) 2014 Daniel Eden +*/.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}@-webkit-keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);-ms-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);-ms-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);-ms-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);-ms-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);-ms-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);-ms-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);-ms-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);-ms-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}@keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);-ms-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);-ms-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);-ms-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);-ms-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);-ms-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}.swing{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes tada{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);-ms-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);-ms-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);-ms-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;transform:none}}@keyframes wobble{0%{-webkit-transform:none;-ms-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);-ms-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);-ms-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);-ms-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);-ms-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);-ms-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);-ms-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);-ms-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);-ms-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);-ms-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);-ms-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);-ms-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);-ms-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);-ms-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);-ms-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);-ms-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);-ms-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);-ms-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);-ms-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);-ms-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);-ms-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);-ms-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);-ms-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);-ms-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);-ms-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);-ms-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);-ms-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);-ms-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-ms-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-ms-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);-ms-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;-ms-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);-ms-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);-ms-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);-ms-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);-ms-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;transform:none;opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);-ms-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);-ms-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);-ms-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);-ms-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);-ms-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);-ms-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);-ms-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0,0,1,45deg);transform:rotate(0,0,1,45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0,0,1,45deg);-ms-transform:rotate(0,0,1,45deg);transform:rotate(0,0,1,45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);-ms-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);-ms-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);-ms-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);-ms-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);-ms-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}@keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);-ms-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-ms-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-ms-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);-ms-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);-ms-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/vnfm/css/vnfm.css b/portal/src/main/webapp/extsys/vnfm/css/vnfm.css new file mode 100644 index 0000000..9dd1e5f --- /dev/null +++ b/portal/src/main/webapp/extsys/vnfm/css/vnfm.css @@ -0,0 +1,486 @@ +/** + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ +body { + font-family: microsoft yahei !important; +} + +/* blue pill (inspired by iTunes) +*******************************************************************************/ + +.grey { + background-color: #e5e5e5; + color: #333; +} + +.blue { + + background-color: #5b9bd1; + border-radius: 20px; + color: #fff; + font-weight: bold; + padding: 8px 0; + text-align: center; + width: 100px; +} + +.blue:hover { + background-color: #e8f3fd; + color: #5b9bd1; +} + +.blue.selected { + border: 0; + background-color: #5b9bd1; + color: #fff; +} + +.blue.selected:hover { + border: 0; + background-color: #5b9bd1; + color: #fff; +} + +p { + color: #444; + font-size: 14px; + font-weight: normal; + line-height: 21px; + margin: 0 0 12px 0; +} + +p.credit { + border-top: 1px solid #ccc; + font-size: 14px; + line-height: 140%; + margin: 36px 0 12px 0; + padding: 8px 0 0 0; + text-align: center; +} + +ul.column { + float: left; + list-style: none; + width: 675px; +} + +ul.column li { + background: #eee; + -webkit-border-radius: 5px; + border-radius: 5px; + -webkit-box-shadow: inset 0 1px 1px 0 #c7c7c7; + box-shadow: inset 0 1px 1px 0 #c7c7c7; + float: left; + margin: 10px 0 0 10px; + display: block; + height: 150px; + text-align: center; + width: 215px; +} + +/* Clear Floated Elements +------------------------------------------------------------------------------*/ +.column:after, .button-collection:after, .clearfix:after, div.project-info:after { + clear: both; + content: ' '; + display: block; + font-size: 0; + line-height: 0; + visibility: hidden; + width: 0; + height: 0; +} + +.container-fluid { + background-color: white !important; + min-height: 500px; +} + +.nav-tabs { + border: 0; +} + +.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { + border: 0; + border-top: 3px solid #F3565D; +} + +.nav-tabs > li > a { + border-radius: 0; +} + +.nav-tabs > li > a:hover { + background-color: #f1f3fa; + border: 1Px solid #f1f3fa; +} + +.c3 { + margin-top: 120px; +} + +.skills-chart-breadcrumb { + +} + +.blue:selected { + border: 0; + background-color: #5b9bd1; +} + +.btn { + /* border-width: 0; */ + /* padding: 7px 14px; */ + /* font-size: 14px; */ + /* outline: none !important; */ + /* background-image: none !important; */ + /* filter: none; */ + /* -webkit-box-shadow: none; */ + -moz-box-shadow: none; + /* box-shadow: none; */ + /* text-shadow: none; */ +} + +select { + border-width: 1px; + padding: 4px 1px; + border-radius: 4px; +} + +.input-sm { + padding: 4px 10px; +} + +.btn-block { + display: block; + width: 100%; + padding-left: 0; + padding-right: 0; +} + +/* Bootstrap buttons */ + +.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active { + color: #333; + background-color: #ededed; + border-color: #b3b3b3; +} + +.open .btn-default.dropdown-toggle { + color: #333; + background-color: #ededed; + border-color: #b3b3b3; +} + +.btn-default:active, .btn-default.active { + background-image: none; + background-color: #e0e0e0; + font-weight: bold; +} + +.btn-default:active:hover, .btn-default.active:hover { + background-color: #e6e6e6; +} + +.open .btn-default.dropdown-toggle { + background-image: none; +} + +.btn-default.disabled, .btn-default.disabled:hover, .btn-default.disabled:focus, .btn-default.disabled:active, .btn-default.disabled.active, .btn-default[disabled], .btn-default[disabled]:hover, .btn-default[disabled]:focus, .btn-default[disabled]:active, .btn-default[disabled].active, fieldset[disabled] .btn-default, fieldset[disabled] .btn-default:hover, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default.active { + background-color: #fff; + border-color: #ccc; +} + +.btn-default .badge { + color: #fff; + background-color: #333; +} + +.btn-default > i[class^="icon-"], .btn-default > i[class*="icon-"] { + color: #8c8c8c; +} + +div[data-name="tab_zone"] div { + background-color: #f1f3fa; + padding: 0px; +} + +div[data-name="cond_zone"] div { + background-color: #fff; + margin-top: 15px; + margin-bottom: 15px; +} + +div[data-name="res-conds-zone"] { + display: inline; +} + +div[data-name="res-conds-zone"] select, div[data-name="res-conds-zone"] span { + /**height:33px;*/ + margin-left: 15px; + color: #5b9bd1; + border-color: #ccc; + font-weight: bold; +} + +.input { + width: 250px; + height: 34px; + padding: 6px 12px; + font-size: 14px; + line-height: 1.42857143; + color: #555; + background-color: #fff; + background-image: none; + border: 1px solid #ccc; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); + -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; +} + +div.separator { + margin: 20px; +} + +div.separator div { + text-align: center; + line-height: 0; +} + +div.separator-line { + height: 1px !important; + width: 100%; + background: #ddd; + overflow: hidden; +} + +.dropdown-toggle { + color: #5b9bd1; +} + +.calendar-date { + color: #5b9bd1; +} + +.range_inputs { + color: #5b9bd1; +} + +.btn.dropdown-toggle, .btn-group .btn.dropdown-toggle, .btn:hover, .btn:disabled, .btn[disabled], .btn:focus, .btn:active, .btn.active { + outline: none !important; + background-image: none !important; + filter: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + text-shadow: none; +} + +#skills-chart-breadcrumb { + margin-bottom: 10px +} + +/*增加daterangepicker的css*/ +input[name="daterange"] { + width: 220px; + line-height: 0; + height: 31px; + vertical-align: top; + margin-top: 2px; +} + +.daterangepicker .ranges { + width: 205px; +} + +.daterangepicker .ranges input { + width: 95px !important; +} + +td.details-control { + background: url('../images/details_open.png') no-repeat center center; + cursor: pointer; +} + +tr.shown td.details-control { + background: url('../images/details_close.png') no-repeat center center; +} + +.details table td { + word-wrap: break-word; + word-break: normal; + border-top: 1px solid #dddddd; +} + +.details table tr:first-child td { + border-top: none; +} + +.details table { + table-layout: fixed; + width: 100%; +} + +td.title { + width: 10%; +} + +table.dataTable tbody th, table.dataTable tbody td { + padding: 8px 10px; +} + +div.dataTables_length, div.dataTables_info { + display: inline; +} + +div.dataTables_paginate { + display: inline; + float: right; +} + +div.pagination-panel { + margin-right: 10px; +} + +input.pagination-panel-input { + width: 50px; +} + +#ict_res_table_div { + margin-top: 15px; +} + +#ict_res_table_div label { + font-weight: 100; +} + +.daterangepicker .daterangepicker_start_input label, .daterangepicker .daterangepicker_end_input label { + color: #5b9bd1; +} + +.daterangepicker .ranges .input-mini { + color: #5b9bd1; +} + +.cancelBtn { + padding: 5px 10px 5px 10px; +} + +.btn:focus, .btn:active:focus, .btn.active:focus { + outline: 0; +} + +#ict_res_table_div table { + width: 100% !important; +} + +.control-label .required { + color: #e02222; + font-size: 12px; + padding-left: 2px; +} + +#ict_vim_table tbody tr { + cursor: pointer; +} + +/*卡片面板样式*/ +.animated-panel { + -webkit-animation-duration: .5s; + animation-duration: .5s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.hpanel { + background-color: none; + border: none; + box-shadow: none; + margin-bottom: 25px; + +} + +.hpanel .panel-body { + border: 1px solid #e4e5e7; + border-radius: 2px; + padding: 20px; + position: relative; +} + +.h-200 { + min-height: 220px; +} + +.m-t-xl { + margin-top: 40px; +} + +.m-t-xl div { + margin-bottom: 15px; +} + +.text-success { + color: #0d638f; +} + +.hpanel > .panel-footer { + color: inherit; + border: 1px solid #e4e5e7; + border-top: none; + font-size: 90%; + background: #f7f9fa; + height: 40px; + padding: 5px 15px; +} + +.color_cloud { + color: #ccc; +} + +.stats-title { + +} + +h3 { + margin-top: 10px; + margin-bottom: 40px; + font-weight: 200; +} + +.blue-font { + color: #428bca; +} + +.hpanel > .panel-footer .pull-right a { + margin-left: 5px; +} + +.hpanel > .panel-footer .pull-right .btn { + min-width: 30px !important; +} + +.font-bold { + font-weight: 600; + margin-bottom: 15px; +} + +.hpanel_show { + background-color: #f7f9fa; +} + +.vnfm-padding { + padding-left: 0; +}
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/vnfm/i18n/nfv-nso-iui-i18n-en-US.properties b/portal/src/main/webapp/extsys/vnfm/i18n/nfv-nso-iui-i18n-en-US.properties new file mode 100644 index 0000000..6d10a1d --- /dev/null +++ b/portal/src/main/webapp/extsys/vnfm/i18n/nfv-nso-iui-i18n-en-US.properties @@ -0,0 +1,55 @@ +# +# Copyright 2016-2017 ZTE Corporation. +# +# 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. +# + +//vnfm +nfv-vnfm-iui-title=VNFM Manage +nfv-vnfm-iui-message-title=vnfm info +nfv-vnfm-iui-message-query-fail=Query vnfm failed. +nfv-vnfm-iui-message-save-success=Save successfully. +nfv-vnfm-iui-message-save-fail=Save failed. +nfv-vnfm-iui-message-vnfm-already-exists=vnfm already exists. +nfv-vnfm-iui-message-update-success=Update successfully. +nfv-vnfm-iui-message-update-fail=Update failed. +nfv-vnfm-iui-message-delete-confirm=Do you want to delete the current vnfm? +nfv-vnfm-iui-message-delete-success=Vnfm deleted successfully. +nfv-vnfm-iui-message-delete-fail=Vnfm deleted failed. + +nfv-vnfm-iui-test-update=Modify vnfm info +nfv-vnfm-iui-text-register=Register vnfm info +nfv-vnfm-iui-text-name=Name +nfv-vnfm-iui-text-type=type +nfv-vnfm-iui-text-version=version +nfv-vnfm-iui-text-certificateUrl=certificate URL +nfv-vnfm-iui-text-vendor=Vendor +nfv-vnfm-iui-text-userName=Username +nfv-vnfm-iui-text-password=Password +nfv-vnfm-iui-text_description=Description +nfv-vnfm-iui-text-cancelBtn=cancel +nfv-vnfm-iui-text-saveBtn=save +nfv-vnfm-iui-text-registerBtn=Register +nfv-vnfm-iui-text-status-normal=Normal +nfv-vnfm-iui-text-status-fail=Alarm +nfv-vnfm-iui-text-total=Total +nfv-vnfm-iui-text-total-vnfm= of vnfm + +nfv-vnfm-iui-validate-name=Please enter a name +nfv-vnfm-iui-validate-type=Please enter the vnfm type +nfv-vnfm-iui-validate-version=Please enter version +nfv-vnfm-iui-validate-vendor=Please enter vendor +nfv-vnfm-iui-validate-vim=Please select a VIM +nfv-vnfm-iui-validate-url-required=Please enter the URL +nfv-vnfm-iui-validate-url=Please enter the right URL +nfv-vnfm-iui-text-url-tip=Example: http://10.0.0.1
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/vnfm/i18n/nfv-nso-iui-i18n-zh-CN.properties b/portal/src/main/webapp/extsys/vnfm/i18n/nfv-nso-iui-i18n-zh-CN.properties new file mode 100644 index 0000000..6adad99 --- /dev/null +++ b/portal/src/main/webapp/extsys/vnfm/i18n/nfv-nso-iui-i18n-zh-CN.properties @@ -0,0 +1,55 @@ +# +# Copyright 2016-2017 ZTE Corporation. +# +# 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. +# + +//vnfm +nfv-vnfm-iui-title=VNFM管理 +nfv-vnfm-iui-message-title=vnfm信息 +nfv-vnfm-iui-message-query-fail=查询vnfm失败。 +nfv-vnfm-iui-message-save-success=保存成功。 +nfv-vnfm-iui-message-save-fail=保存失败。 +nfv-vnfm-iui-message-vnfm-already-exists=vnfm 已经存在 +nfv-vnfm-iui-message-update-success=修改成功。 +nfv-vnfm-iui-message-update-fail=修改失败。 +nfv-vnfm-iui-message-delete-confirm=确定删除所选vnfm信息？ +nfv-vnfm-iui-message-delete-success=删除成功 +nfv-vnfm-iui-message-delete-fail=删除失败 + +nfv-vnfm-iui-test-update=修改vnfm信息 +nfv-vnfm-iui-text-register=注册vnfm信息 +nfv-vnfm-iui-text-name=名称 +nfv-vnfm-iui-text-type=类型 +nfv-vnfm-iui-text-version=版本 +nfv-vnfm-iui-text-certificateUrl=认证url +nfv-vnfm-iui-text_description=描述 +nfv-vnfm-iui-text-vendor=厂商 +nfv-vnfm-iui-text-userName=接入用户 +nfv-vnfm-iui-text-password=接入密码 +nfv-vnfm-iui-text-cancelBtn=取消 +nfv-vnfm-iui-text-saveBtn=保存 +nfv-vnfm-iui-text-registerBtn=注册vnfm +nfv-vnfm-iui-text-status-normal=正常 +nfv-vnfm-iui-text-status-fail=报警 +nfv-vnfm-iui-text-total=共 +nfv-vnfm-iui-text-total-vnfm= vnfm + +nfv-vnfm-iui-validate-name=请输入名称 +nfv-vnfm-iui-validate-type=请输入vnfm类型 +nfv-vnfm-iui-validate-version=请输入版本号 +nfv-vnfm-iui-validate-vendor=请输入厂商 +nfv-vnfm-iui-validate-vim=请选择VIM +nfv-vnfm-iui-validate-url-required=请输入URL +nfv-vnfm-iui-validate-url=请输入正确的URL +nfv-vnfm-iui-text-url-tip=例如：http://10.0.0.1
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/vnfm/js/commonUtil.js b/portal/src/main/webapp/extsys/vnfm/js/commonUtil.js new file mode 100644 index 0000000..44a72f3 --- /dev/null +++ b/portal/src/main/webapp/extsys/vnfm/js/commonUtil.js @@ -0,0 +1,128 @@ +/* + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ +var commonUtil = {}; +commonUtil.arrayRemove = function (aryInstance, index) { + if (aryInstance == undefined || aryInstance == null) { + return; + } + for (var i = 0, n = 0; i < aryInstance.length; i++) { + if (aryInstance[i] != aryInstance[dx]) { + aryInstance[n++] = aryInstance[i]; + } + } + aryInstance.length -= 1; +}; + +//For the expansion of the Date, convert the Date to specify the format String +// examples： +// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 +// (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18 +commonUtil.parseDate = function (dateObj, format) { + var o = { + "M+": dateObj.getMonth() + 1, //month + "d+": dateObj.getDate(), //day + "h+": dateObj.getHours(), //hour + "m+": dateObj.getMinutes(), //minute + "s+": dateObj.getSeconds(), //second + "q+": Math.floor((dateObj.getMonth() + 3) / 3), //quarter + "S": dateObj.getMilliseconds() //millisecond + } + if (/(y+)/.test(format)) format = format.replace(RegExp.$1, + (dateObj.getFullYear() + "").substr(4 - RegExp.$1.length)); + for (var k in o) + if (new RegExp("(" + k + ")").test(format)) + format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : + ("00" + o[k]).substr(("" + o[k]).length)); + return format; +}; + +//tooltip +commonUtil.showMessage = function (message, type) { + $.growl({ + icon: "fa fa-envelope-o fa-lg", + title: " " + $.i18n.prop("nfv-nso-iui-common-tip"), + message: message + }, { + type: type + }); +}; + +commonUtil.registerCometdMessage = function (url, channel, callback) { + var cometd = new $.Cometd(); + var cometdURL = location.protocol + "//" + location.host + url; + cometd.configure({ + url: cometdURL, + logLevel: "info" + }); + // unregister websocket transport, use long-polling transport + cometd.unregisterTransport('websocket'); + // store channel object parameters(this object include channel and callback function), start from arguments[1] + var _args = arguments; + + cometd.addListener("/meta/handshake", function (handshake) { + if (handshake.successful === true) { + cometd.batch(function () { + //subscribe channel + cometd.subscribe(channel, function (message) { + callback.call(this, message.data); + }); + }); + } + }); + cometd.handshake(); +} + +commonUtil.format = function () { + if (arguments.length == 0) { + return null; + } + var str = arguments[0]; + for (var i = 0; i < arguments.length; i++) { + var reg = new RegExp("\\{" + (i - 1) + "\\}", "gm"); + str = str.replace(reg, arguments[i]); + } + return str; +} + +commonUtil.get = function (url, params, callback) { + $.ajax({ + type: "GET", + url: url, + //contentType : contentType || "application/x-www-form-urlencoded; charset=UTF-8", + dataType: "json", + data: params || {}, + success: callback + }); +} + +commonUtil.post = function (url, params, callback, contentType) { + $.ajax({ + type: "POST", + url: url, + contentType: contentType || "application/x-www-form-urlencoded; charset=UTF-8", + data: params || {}, + success: callback + }); +} + +commonUtil.delete = function (url, callback, contentType) { + $.ajax({ + type: "DELETE", + url: url, + contentType: contentType || "application/x-www-form-urlencoded; charset=UTF-8", + success: callback + }); +}
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/vnfm/js/loadi18n_nsoc.js b/portal/src/main/webapp/extsys/vnfm/js/loadi18n_nsoc.js new file mode 100644 index 0000000..a543a20 --- /dev/null +++ b/portal/src/main/webapp/extsys/vnfm/js/loadi18n_nsoc.js @@ -0,0 +1,38 @@ +/* + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ +function loadPropertiesSideMenu(lang, fileNamePrefix, filePath) { + jQuery.i18n.properties({ + language: lang, + name: fileNamePrefix, + path: filePath, + mode: 'map', + callback: function () { + var i18nItems = $("[name_i18n=com_zte_nfv_nsoc_i18n]"); + for (var i = 0; i < i18nItems.length; i++) { + var $item = $(i18nItems.eq(i)); + var itemId = $item.attr("id"); + var itemTitle = $item.attr("title"); + if (typeof(itemTitle) != "undefined") { + $item.attr("title", $.i18n.prop(itemId)); + } else { + $item.text($.i18n.prop(itemId)); + } + } + } + }); +} +var lang = getLanguage(); +loadPropertiesSideMenu(lang, 'nfv-nso-iui-i18n', 'i18n/');
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/vnfm/js/vnfm-validate.js b/portal/src/main/webapp/extsys/vnfm/js/vnfm-validate.js new file mode 100644 index 0000000..627d6d5 --- /dev/null +++ b/portal/src/main/webapp/extsys/vnfm/js/vnfm-validate.js @@ -0,0 +1,89 @@ +/* + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ +$(function () { + var form = $('#vnfm_form'); + var error = $('.alert-danger', form); + var success = $('.alert-success', form); + + form.validate({ + doNotHideMessage: true, //this option enables to show the error/success messages on tab switch. + errorElement: 'span', //default input error message container + errorClass: 'help-block', // default input error message class + focusInvalid: false, // do not focus the last invalid input + rules: { + name: { + required: true, + maxlength: 20 + }, + type: { + required: true, + maxlength: 20 + }, + version: { + required: true, + maxlength: 20 + }, + vendor: { + required: true, + maxlength: 20 + }, + url: { + required: true, + url: true + } + }, + messages: { + name: { + required: $.i18n.prop("nfv-vnfm-iui-validate-name") + }, + type: { + required: $.i18n.prop("nfv-vnfm-iui-validate-type") + }, + version: { + required: $.i18n.prop("nfv-vnfm-iui-validate-version") + }, + vendor: { + required: $.i18n.prop("nfv-vnfm-iui-validate-vendor") + }, + url: { + required: $.i18n.prop("nfv-vnfm-iui-validate-url-required"), + url: $.i18n.prop("nfv-vnfm-iui-validate-url") + } + }, + errorPlacement: function (error, element) { // render error placement for each input type + error.insertAfter(element); // for other inputs, just perform default behavior + }, + invalidHandler: function (event, validator) { //display error alert on form submit + success.hide(); + error.show(); + }, + highlight: function (element) { // hightlight error inputs + $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group + }, + unhighlight: function (element) { // revert the change done by hightlight + $(element).closest('.form-group').removeClass('has-error'); // set error class to the control group + }, + success: function (label) { + label.addClass('valid') // mark the current input as valid and display OK icon + .closest('.form-group').removeClass('has-error'); // set success class to the control group + }, + submitHandler: function (form) { + success.show(); + error.hide(); + //add here some ajax code to submit your form or just call form.submit() if you want to submit the form without ajax + } + }); +});
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/vnfm/js/vnfmController.js b/portal/src/main/webapp/extsys/vnfm/js/vnfmController.js new file mode 100644 index 0000000..1df32b1 --- /dev/null +++ b/portal/src/main/webapp/extsys/vnfm/js/vnfmController.js @@ -0,0 +1,302 @@ +/* + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ + +var vm = avalon + .define({ + $id: "vnfmController", + vnfmInfo: [], + //mocSelectItems : [], + vimSelectItems: [], + server_rtn: { + info_block: false, + warning_block: false, + rtn_info: "", + $RTN_SUCCESS: "RTN_SUCCESS", + $RTN_FAILED: "RTN_FAILED" + }, + $Status: { + success: "active", + failed: "inactive" + }, + $restUrl: { + queryVnfmInfoUrl: '/onapapi/aai/esr/v1/vnfms', + addVnfmInfoUrl: '/onapapi/aai/esr/v1/vnfms', + updateVnfmInfoUrl: '/onapapi/aai/esr/v1/vnfms/', + delVnfmInfoUrl: '/onapapi/aai/esr/v1/vnfms/', + queryMocUrl: '', + queryVimUrl: '/onapapi/aai/esr/v1/vims' + }, + $htmlText: { + saveSuccess: $.i18n.prop("nfv-vnfm-iui-message-save-success"), + saveFail: $.i18n.prop("nfv-vnfm-iui-message-save-fail"), + alreadyExist: $.i18n.prop("nfv-vnfm-iui-message-vnfm-already-exists"), + updateSuccess: $.i18n.prop("nfv-vnfm-iui-message-update-success"), + updateFail: $.i18n.prop("nfv-vnfm-iui-message-update-fail") + }, + $initTable: function () { + $.ajax({ + "type": 'GET', + "url": vm.$restUrl.queryVnfmInfoUrl, + //"dataType": "json", + "success": function (resp) { + for (var i = 0; i < resp.length; i++) { + resp[i].status = vm.$Status.success; + } + vm.vnfmInfo = resp; + }, + error: function (XMLHttpRequest, textStatus, errorThrown) { + bootbox.alert($.i18n.prop("nfv-vnfm-iui-message-query-fail") + "：" + textStatus + ":" + errorThrown); + return; + }, + complete: function () { + vnfmUtil.tooltipVnfmStatus(); + } + }); + }, + // $initMoc : function() { + // /*var url = vm.$restUrl.queryMocUrl; + // commonUtil.get(url, null, function(resp) { + // if (resp) { + // vm.addVnfm.moc = resp.data; + // } + // });*/ + // var resp = [ + // { id : "nfv.vnfm.eco", name : "VNFM(ECO)"}, + // { id : "nfv.vnfm.tacker", name : "VNFM(Tacker)"}, + // { id : "nfv.vnfm.cmcc", name : "VNFM(CMCC)"}, + // { id : "nfv.vnfm.etsi", name : "VNFM(ETSI)"} + // ] + // vm.mocSelectItems = resp; + // }, + $initVim: function () { + $.ajax({ + type: 'get', + url: vm.$restUrl.queryVimUrl, + dataType: 'json', + success: function (resp) { + if (resp) { + vm.vimSelectItems = resp; + } + vm.vimSelectItems.push({"vimId": "", "name": ""}); + } + }); + }, + addVnfm: { + title: $.i18n.prop("nfv-vnfm-iui-text-register"), + vnfmId: "", + name: "", + type: "", + //moc : "", + nameReadonly : false, + vimId: "", + //vimVisiable : false, + vendor: "", + version: "", + description: "", + certificateUrl: "", + url: "", + urlTip: $.i18n.prop("nfv-vnfm-iui-text-url-tip"), + userName: "", + password: "", + saveType: "add", + status: "" + }, + $showVnfmTable: function () { + vm.addVnfm.title = $.i18n.prop("nfv-vnfm-iui-text-register"), + vm.addVnfm.vnfmId = ""; + vm.addVnfm.name = ""; + vm.addVnfm.type = ""; + //vm.addVnfm.moc = ""; + vm.addVnfm.nameReadonly = false; + vm.addVnfm.vimId = ""; + //vm.addVnfm.vimVisiable = false; + vm.addVnfm.vendor = ""; + vm.addVnfm.version = ""; + vm.addVnfm.description = ""; + vm.addVnfm.certificateUrl = ""; + vm.addVnfm.url = ""; + vm.addVnfm.userName = ""; + vm.addVnfm.password = ""; + vm.addVnfm.saveType = "add"; + vm.server_rtn.warning_block = false; + vm.server_rtn.info_block = false; + //vm.$initMoc(); + vm.$initVim(); + //vm.$mocChange(); + + $(".form-group").each(function () { + $(this).removeClass('has-success'); + $(this).removeClass('has-error'); + $(this).find(".help-block[id]").remove(); + }); + $("#addVnfmDlg").modal("show"); + }, + // $getMocName : function(mocId) { + // var items = vm.mocSelectItems; + // for(var i=0;i<items.length;i++) { + // if(items[i].id == mocId) { + // return items[i].name; + // } + // } + // return ""; + // }, + $saveVnfm: function () { + var form = $('#vnfm_form'); + if (form.valid() == false) { + return false; + } + vm.server_rtn.info_block = true; + vm.server_rtn.warning_block = false; + vm.addVnfm.status = vm.$Status.success; + + var param = { + name: vm.addVnfm.name, + //status : vm.addVnfm.status, + //moc : $("#moc").val(), + //vimId : vm.$getVimId($("#moc").val()), + vimId: $("#vimId").val(), + vendor: vm.addVnfm.vendor, + version: vm.addVnfm.version, + type: vm.addVnfm.type, + description: vm.addVnfm.description, + certificateUrl: vm.addVnfm.certificateUrl, + url: vm.addVnfm.url, + userName: vm.addVnfm.userName, + password: vm.addVnfm.password + } + //save VIM info + if (vm.addVnfm.saveType == "add") { + // for( var i = 0; i < vm.vnfmInfo.length; i ++ ){ + // if(vm.addVnfm.name == vm.vnfmInfo[i].name){ + // vm.server_rtn.warning_block = true; + // vm.server_rtn.rtn_info = vm.$htmlText.alreadyExist; + // commonUtil.showMessage(vm.$htmlText.alreadyExist, "failed"); + // return; + // } + // } + $.ajax({ + type: "POST", + url: vm.$restUrl.addVnfmInfoUrl, + data: JSON.stringify(param), + dataType: "json", + contentType: "application/json", + success: function (data) { + vm.server_rtn.info_block = false; + vm.server_rtn.warning_block = false; + if (data) { + vm.vnfmInfo = []; + vm.$initTable(); + + $('#addVnfmDlg').modal('hide'); + commonUtil.showMessage(vm.$htmlText.saveSuccess, "success"); + } else { + vm.server_rtn.warning_block = true; + vm.server_rtn.rtn_info = vm.$htmlText.saveFail; + commonUtil.showMessage(vm.$htmlText.saveFail, "failed"); + } + }, + error: function (XMLHttpRequest, textStatus, errorThrown) { + vm.server_rtn.warning_block = true; + vm.server_rtn.rtn_info = textStatus + ":" + errorThrown; + vm.server_rtn.info_block = false; + } + }); + } else { + $.ajax({ + type: "PUT", + url: vm.$restUrl.updateVnfmInfoUrl + vm.addVnfm.vnfmId, + data: JSON.stringify(param), + dataType: "json", + contentType: "application/json", + success: function (data) { + vm.server_rtn.info_block = false; + vm.server_rtn.warning_block = false; + if (data) { + for (var i = 0; i < vm.vnfmInfo.length; i++) { + if (vm.vnfmInfo[i].vnfmId == vm.addVnfm.vnfmId) { + vm.vnfmInfo[i].name = vm.addVnfm.name; + vm.vnfmInfo[i].vimId = $("#vimId").val(); + vm.vnfmInfo[i].vendor = vm.addVnfm.vendor; + vm.vnfmInfo[i].version = vm.addVnfm.version; + vm.vnfmInfo[i].certificateUrl = vm.addVnfm.certificateUrl; + vm.vnfmInfo[i].description = vm.addVnfm.description; + vm.vnfmInfo[i].url = vm.addVnfm.url; + vm.vnfmInfo[i].userName = vm.addVnfm.userName; + vm.vnfmInfo[i].password = vm.addVnfm.password; + } + } + $('#addVnfmDlg').modal('hide'); + commonUtil.showMessage(vm.$htmlText.updateSuccess, "success"); + } else { + vm.server_rtn.warning_block = true; + vm.server_rtn.rtn_info = vm.$htmlText.updateFail; + commonUtil.showMessage(vm.$htmlText.updateFail, "failed"); + } + }, + error: function (XMLHttpRequest, textStatus, errorThrown) { + vm.server_rtn.warning_block = true; + vm.server_rtn.rtn_info = textStatus + ":" + errorThrown; + vm.server_rtn.info_block = false; + } + }); + } + }, + // mocRendered : function(action) { + // if(vm.addVnfm.saveType === "update" && vm.addVnfm.moc) { + // var items = vm.mocSelectItems; + // for(var i=0;i<items.length;i++) { + // if(items[i].id == vm.addVnfm.moc) { + // $("#moc")[0].selectedIndex = i; + // vm.$mocChange(); + // break; + // } + // } + // } else { + // $("#moc")[0].selectedIndex = 0; + // } + // }, + vimRendered: function (action) { + var items = vm.vimSelectItems; + if (vm.addVnfm.saveType === "update") { + for (var i = 0; i < items.length; i++) { + if (items[i].vimId == vm.addVnfm.vimId) { + $("#vimId")[0].selectedIndex = i; + break; + } + } + } else { + $("#vimId")[0].selectedIndex = items.length - 1; + } + }, + // $mocChange : function() { + // var mocId = $('#moc').val(); + // if(mocId == "nfv.vnfm.tacker") { + // vm.addVnfm.vimVisiable = true; + // } else { + // vm.addVnfm.vimVisiable = false; + // } + // }, + // $getVimId : function(mocId) { + // if(vm.addVnfm.vimVisiable) { + // return $("#vimId").val(); + // } else { + // return ""; + // } + // } + }); +avalon.scan(); +vm.$initTable(); +//vm.$initMoc();
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/vnfm/js/vnfmUtil.js b/portal/src/main/webapp/extsys/vnfm/js/vnfmUtil.js new file mode 100644 index 0000000..21038da --- /dev/null +++ b/portal/src/main/webapp/extsys/vnfm/js/vnfmUtil.js @@ -0,0 +1,78 @@ +/* + * Copyright 2016-2017 ZTE Corporation. + * + * 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. + */ +var vnfmUtil = {}; + +vnfmUtil.delVnfm = function (vnfmId) { + bootbox.confirm($.i18n.prop("nfv-vnfm-iui-message-delete-confirm"), function (result) { + if (result) { + $.ajax({ + type: "DELETE", + url: vm.$restUrl.delVnfmInfoUrl + vnfmId, + dataType: "json", + success: function (data, statusText, jqXHR) { + if (jqXHR.status == "204") { + for (var i = 0; i < vm.vnfmInfo.length; i++) { + if (vnfmId == vm.vnfmInfo[i].vnfmId) { + //delete the vnfm object from vnfm array + vm.vnfmInfo.splice(i, 1); + break; + } + } + commonUtil.showMessage($.i18n.prop("nfv-vnfm-iui-message-delete-success"), "success"); + } else { + commonUtil.showMessage($.i18n.prop("nfv-vnfm-iui-message-delete-fail"), "warning"); + } + }, + error: function () { + commonUtil.showMessage($.i18n.prop("nfv-vnfm-iui-message-delete-fail"), "warning"); + } + }); + } + }); +} + +vnfmUtil.updateVnfm = function (data) { + vm.addVnfm.vnfmId = data.vnfmId; + vm.addVnfm.name = data.name; + //vm.addVnfm.moc = data.moc; + //vm.addVnfm.mocDisabled = true; + vm.addVnfm.vendor = data.vendor; + vm.addVnfm.version = data.version; + vm.addVnfm.description = data.description; + vm.addVnfm.type = data.type; + vm.addVnfm.vimId = data.vimId; + vm.addVnfm.url = data.url; + vm.addVnfm.nameReadonly=true; + vm.addVnfm.userName = data.userName; + vm.addVnfm.password = data.password; + vm.addVnfm.saveType = "update"; + vm.addVnfm.title = $.i18n.prop("nfv-vnfm-iui-test-update"); + vm.server_rtn.info_block = false; + vm.server_rtn.warning_block = false; + //vm.$initMoc(); + vm.$initVim(); + + $(".form-group").each(function () { + $(this).removeClass('has-success'); + $(this).removeClass('has-error'); + $(this).find(".help-block[id]").remove(); + }); + $("#addVnfmDlg").modal("show"); +} + +vnfmUtil.tooltipVnfmStatus = function () { + $("[data-toggle='tooltip']").tooltip(); +}
\ No newline at end of file diff --git a/portal/src/main/webapp/extsys/vnfm/vnfmView.html b/portal/src/main/webapp/extsys/vnfm/vnfmView.html new file mode 100644 index 0000000..a26ed57 --- /dev/null +++ b/portal/src/main/webapp/extsys/vnfm/vnfmView.html @@ -0,0 +1,240 @@ +<!-- + + Copyright 2016-2017 ZTE Corporation. + + 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. + +--> +<!DOCTYPE html> +<html> +<head lang="en"> + <meta charset="UTF-8"> + <title></title> + <link href="../../thirdparty/font-awesome/css/font-awesome.min.css" rel="stylesheet"/> + <link href="../../thirdparty/bootstrap/css/bootstrap.min.css" rel="stylesheet"/> + <link href="../../thirdparty/uniform/css/uniform.default.min.css" rel="stylesheet"/> + <link href="../../thirdparty/css/ZteIctIcons/style.css" rel="stylesheet"/> + <link href="../../thirdparty/css/ngict-component.css" rel="stylesheet"/> + <link href="css/animate.min.css" rel="stylesheet"/> + <link href="css/vnfm.css" rel="stylesheet"/> + <style> + .ms-controller { + visibility: hidden + } + </style> + +</head> +<body> +<div ms-controller="vnfmController" class="container-fluid ms-controller"> + <div id="addVnfmDlg" class="modal fade" tabindex="-1" role="dialog" + aria-labelledby="myModalLabel" aria-hidden="true"> + <div class="modal-dialog"> + <div class="modal-content Changepasswd"> + <div class="content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" + aria-hidden="true">× + </button> + <h4 id="myModalLabel">{{addVnfm.title}}</h4> + </div> + <div class="modal-body"> + <form class="form-horizontal" id="vnfm_form" role="form"> + <input type="hidden" ms-duplex="addVnfm.vnfmId" name="vnfmId" class="form-control"/> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span id="nfv-vnfm-iui-text-name" name_i18n="com_zte_nfv_nsoc_i18n"></span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="addVnfm.name" name="name" class="form-control" ms-readonly="addVnfm.nameReadonly"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span id="nfv-vnfm-iui-text-type" name_i18n="com_zte_nfv_nsoc_i18n"></span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="addVnfm.type" name="type" class="form-control"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span id="nfv-vnfm-iui-text-vendor" name_i18n="com_zte_nfv_nsoc_i18n"></span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="addVnfm.vendor" name="vendor" class="form-control"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span id="nfv-vnfm-iui-text-version" name_i18n="com_zte_nfv_nsoc_i18n"></span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="addVnfm.version" name="version" class="form-control"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span>URL</span> + <span class="required" aria-required="true">*</span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="addVnfm.url" name="url" class="form-control" + ms-attr-placeholder="addVnfm.urlTip"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="col-sm-3 control-label">VIM + <span></span> + </label> + <div class="col-sm-7"> + <select class="form-control" id="vimId" name="vimId"> + <option ms-repeat-vim="vimSelectItems" ms-attr-value="vim.vimId" + data-repeat-rendered="vimRendered">{{vim.name}} + </option> + </select> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span id="nfv-vnfm-iui-text-certificateUrl" + name_i18n="com_zte_nfv_nsoc_i18n"></span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="addVnfm.certificateUrl" name="certificateUrl" + class="form-control"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span id="nfv-vnfm-iui-text-userName" name_i18n="com_zte_nfv_nsoc_i18n"></span> + </label> + <div class="col-sm-7"> + <input type="text" ms-duplex="addVnfm.userName" name="userName" + class="form-control"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span id="nfv-vnfm-iui-text-password" name_i18n="com_zte_nfv_nsoc_i18n"></span> + </label> + <div class="col-sm-7"> + <input type="password" ms-duplex="addVnfm.password" name="password" + class="form-control"/> + <span class="help-block"></span> + </div> + </div> + <div class="form-group"> + <label class="control-label col-sm-3"> + <span id="nfv-vnfm-iui-text_description" name_i18n="com_zte_nfv_nsoc_i18n"></span> + </label> + <div class="col-sm-7"> + <textarea class="form-control" rows="3" ms-duplex="addVnfm.description" + name="description"></textarea> + <span class="help-block"></span> + </div> + </div> + </form> + + </div> + <div class="modal-footer"> + <button class="btn" data-dismiss="modal" aria-hidden="true" id="nfv-vnfm-iui-text-cancelBtn" + name_i18n="com_zte_nfv_nsoc_i18n"></button> + <button class="btn btn-primary" type="submit" ms-click="$saveVnfm" + id="nfv-vnfm-iui-text-saveBtn" name_i18n="com_zte_nfv_nsoc_i18n"></button> + </div> + </div> + </div> + </div> + </div> + <div class="row-fluid" data-name="cond_zone"> + <div class="col-md-12"> + <button class="btn white radius_l" id="app-new-btn" ms-click="$showVnfmTable"> + <i class="ict-new"></i> <span id="nfv-vnfm-iui-text-registerBtn" + name_i18n="com_zte_nfv_nsoc_i18n"></span> + </button> + </div> + </div> + + <div class="col-sm-12 vnfm-padding" ms-each-el="vnfmInfo"> + <div class="col-sm-4 animated-panel zoomIn" style="-webkit-animation-delay: 0.1s;"> + <div class="hpanel stats"> + <div class="panel-body h-200" ms-hover="hpanel_show"> + <div class="pull-left"> + <span class="label label-success" ms-if="el.status === $Status.success" + id="nfv-vnfm-iui-text-status-normal" name_i18n="com_zte_nfv_nsoc_i18n"></span> + <span class="label label-danger" ms-attr-title="el.errorInfo" data-toggle="tooltip" + ms-if="el.status === $Status.failed" id="nfv-vnfm-iui-text-status-fail" + name_i18n="com_zte_nfv_nsoc_i18n"></span> + </div> + <div class="stats-icon pull-right"> + <i class="fa fa-server fa-5x color_cloud"></i> + </div> + <div class="m-t-xl"> + <h3 ms-text="el.name"></h3> + <div><span id="nfv-vnfm-iui-text-type" name_i18n="com_zte_nfv_nsoc_i18n"></span>：<span + ms-text="el.type"></span></div> + <div>URL：<span ms-text="el.url"></span></div> + </div> + </div> + <div class="panel-footer"> + <div class="pull-right"> + <a class="btn btn-default btn-sm" ms-click="vnfmUtil.updateVnfm(el.$model)"><i + class="fa fa-pencil-square-o fa-lg"></i></a> + <a class="btn btn-default btn-sm" ms-click="vnfmUtil.delVnfm(el.vnfmId)"><i + class="fa fa-trash-o fa-lg"> </i></a> + </div> + </div> + </div> + </div> + </div> + <div class="col-sm-12"> + <div class="pull-left text-muted"> + <small><span id="nfv-vnfm-iui-text-total" name_i18n="com_zte_nfv_nsoc_i18n"></span> <span class="blue-font" + ms-text="vnfmInfo.size()"></span> + <span id="nfv-vnfm-iui-text-total-vnfm" name_i18n="com_zte_nfv_nsoc_i18n"></span></small> + </div> + </div> +</div> +<script type="text/javascript" src="../../thirdparty/jquery/jquery-1.10.2.min.js"></script> +<script type="text/javascript" src="../../thirdparty/jquery.i18n/jquery.i18n.properties-1.0.9.js"></script> +<script type="text/javascript" src="../../thirdparty/bootstrap/js/bootstrap.min.js"></script> +<script type="text/javascript" src="../../thirdparty/bootbox/bootbox.min.js"></script> +<script type="text/javascript" src="../../thirdparty/jquery-validation/js/jquery.validate.min.js"></script> +<script type="text/javascript" src="../../thirdparty/jquery-validation/js/additional-methods.min.js"></script> + +<script type="text/javascript" src="../../thirdparty/bootstrap-growl/bootstrap-growl.min.js"></script> +<!--<script type="text/javascript" src="../../thirdparty/cometd/cometd.js"></script>--> +<!--<script type="text/javascript" src="../../thirdparty/cometd/jquery.cometd.js"></script>--> +<script type="text/javascript" src="../../thirdparty/avalon/avalon.js"></script> + +<script type="text/javascript" src="../../thirdparty/js/tools.js"></script> + +<script type="text/javascript" src="js/commonUtil.js"></script> +<script type="text/javascript" src="js/loadi18n_nsoc.js"></script> + +<script type="text/javascript" src="js/vnfm-validate.js"></script> +<script type="text/javascript" src="js/vnfmUtil.js"></script> +<script type="text/javascript" src="js/vnfmController.js"></script> +</body> +</html>
\ No newline at end of file |