Adding new svg and dummy animation

Issue #238

3 files changed, 60 insertions, 21 deletions

diff --git a/web-ui/app/index.html b/web-ui/app/index.html
index 2d35662c..d297b28c 100644
--- a/web-ui/app/index.html
+++ b/web-ui/app/index.html
@@ -19,27 +19,33 @@
     <section id="left-pane" class="left-off-canvas-menu">
       <a class="left-off-canvas-logo side-nav-toggle" href="#">
       <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-           viewBox="30.4 316.8 555.2 155.2" enable-background="new 30.4 316.8 555.2 155.2" xml:space="preserve">
-        <g>
-          <path fill="#3E3B38" d="M30.4,355.5v77.8L98.9,472l68.5-38.7v-77.8l-68.5-38.7L30.4,355.5z M96,443.9l-39.9-22v-47.7L96,396.9
-            V443.9z M141.2,421.8l-39.4,22v-47l39.4-23C141.2,373.8,141.2,421.8,141.2,421.8z M141.2,367.5l-42.4,25.2l-42.8-25.2l42.8-23
-            L141.2,367.5z"/>
-          <path fill="#3E3B38" d="M214.9,363.1h-21.8v64.6h14.7v-24h7.1c12.7,0,22-7.3,22-20.8C237,369.7,227.4,363.1,214.9,363.1z M212,392
-            h-4.2v-17.1h4.2c5.9,0,11.3,2,11.3,8.6S217.9,392,212,392z"/>
-          <rect x="241.9" y="363.1" fill="#3E3B38" width="14.7" height="64.6"/>
-          <polygon fill="#3E3B38" points="320.7,363.1 302.3,363.1 290.3,380.7 278.3,363.1 261,363.1 281.3,392.9 259.2,427.7 277.6,427.7
-            290.3,405.7 303.1,427.7 322.2,427.7 299.4,392.9   "/>
-          <polygon fill="#3E3B38" points="324.6,427.7 361.6,427.7 361.6,414.7 339.3,414.7 339.3,401.8 360.6,401.8 360.6,388.8
-            339.3,388.8 339.3,376 361.6,376 361.6,363.1 324.6,363.1   "/>
-          <path fill="#3E3B38" d="M416.6,363.1l-20.8,51.7h-14.4v-51.7h-14.7v64.6h24h13h2.9l4.9-13H436l4.9,13h15.9l-26.2-64.6H416.6z
-             M416.2,401.8l7.1-18.8h0.2l7.1,18.8H416.2z"/>
-          <polygon fill="#3E3B38" points="444.1,376 459.5,376 459.5,427.7 474.2,427.7 474.2,376 489.6,376 489.6,363.1 444.1,363.1   "/>
-          <polygon fill="#3E3B38" points="494.5,427.7 531.5,427.7 531.5,414.7 509.4,414.7 509.4,401.8 530.7,401.8 530.7,388.8
-            509.4,388.8 509.4,376 531.5,376 531.5,363.1 494.5,363.1   "/>
-          <path fill="#3E3b38" d="M553,363.1h-16.2v64.6H553c17.9,0,32.6-13.5,32.6-32.3C585.6,376.5,570.6,363.1,553,363.1z M553.5,414.5
-            h-2.2v-38.2h2.2c11,0,18.4,8.3,18.4,19.1C571.9,406.2,564.5,414.5,553.5,414.5z"/>
-        </g>
-      </svg>
+   viewBox="30.4 627.3 612 171.1" enable-background="new 30.4 627.3 612 171.1" xml:space="preserve">
+<g>
+  <path fill="#3E3B38" d="M30.4,669.9v85.8l75.5,42.7l75.5-42.7v-85.8l-75.5-42.7L30.4,669.9z M102.7,767.4l-44-24.3v-52.6l44,25
+    V767.4z M152.5,743l-43.4,24.3v-51.8l43.4-25.4V743z M152.5,683.1l-46.7,27.8l-47.2-27.8l47.2-25.4L152.5,683.1z"/>
+  <path fill="#3E3B38" d="M233.8,678.3h-24v71.2h16.2v-26.5h7.8c14,0,24.3-8,24.3-22.9C258.1,685.6,247.6,678.3,233.8,678.3z
+     M230.6,710.2h-4.6v-18.8h4.6c6.5,0,12.5,2.2,12.5,9.5C243,708.1,237.1,710.2,230.6,710.2z"/>
+  <rect x="263.5" y="678.3" fill="#3E3B38" width="16.2" height="71.2"/>
+  <polygon fill="#3E3B38" points="350.4,678.3 330.1,678.3 316.9,697.7 303.7,678.3 284.6,678.3 307,711.1 282.6,749.5 302.9,749.5 
+    316.9,725.3 331,749.5 352.1,749.5 326.9,711.1   "/>
+  <polygon fill="#3E3B38" points="354.7,749.5 395.5,749.5 395.5,735.2 370.9,735.2 370.9,721 394.4,721 394.4,706.6 370.9,706.6 
+    370.9,692.5 395.5,692.5 395.5,678.3 354.7,678.3   "/>
+  <path fill="#3E3B38" d="M456.1,678.3l-22.9,57h-15.9v-57h-16.2v71.2h26.5h14.3h3.2l5.4-14.3h27l5.4,14.3h17.5l-28.9-71.2H456.1z
+     M455.7,721l7.8-20.7h0.2l7.8,20.7H455.7z"/>
+  <polygon fill="#3E3B38" points="486.4,692.5 503.4,692.5 503.4,749.5 519.6,749.5 519.6,692.5 536.6,692.5 536.6,678.3 
+    486.4,678.3   "/>
+  <polygon fill="#3E3B38" points="542,749.5 582.8,749.5 582.8,735.2 558.4,735.2 558.4,721 581.9,721 581.9,706.6 558.4,706.6 
+    558.4,692.5 582.8,692.5 582.8,678.3 542,678.3   "/>
+  <path fill="#3E3B38" d="M606.5,678.3h-17.9v71.2h17.9c19.7,0,35.9-14.9,35.9-35.6C642.4,693.1,625.9,678.3,606.5,678.3z M607,735
+    h-2.4v-42.1h2.4c12.1,0,20.3,9.1,20.3,21.1C627.3,725.8,619.1,735,607,735z"/>
+    </g>
+    <polygon id="clock1" class="logo-part" fill="#3E3B38" points="105.8,657.8 105.8,628 105.8,627.3 181.4,669.9 152.5,683.1 "/>
+    <polygon id="clock2" class="logo-part" fill="#3E3B38" points="152.5,683.1 181.4,669.9 181.4,755.7 152.5,743 "/>
+    <polygon id="clock3" class="logo-part" fill="#3E3B38" points="105.9,798.3 105.9,769 152.5,743 181.4,755.7 "/>
+    <polygon id="clock4" class="logo-part" fill="#3E3B38" points="58.7,743.1 105.9,769 105.9,798.3 30.4,755.7 "/>
+    <polygon id="clock5" class="logo-part" fill="#3E3B38" points="30.4,669.9 58.6,683.1 58.7,743.1 30.4,755.7 "/>
+    <polygon id="clock6" class="logo-part" fill="#3E3B38" points="105.8,628 105.8,657.8 58.6,683.1 30.4,669.9 105.8,627.3 "/>
+    </svg>
       </a>
       <a class="side-nav-toggle side-nav-toggle-icon" href="#">
         <i class="toggle fa fa-navicon"></i>
diff --git a/web-ui/app/scss/_alerts.scss b/web-ui/app/scss/_alerts.scss
index cfb31cbe..8d7396fc 100644
--- a/web-ui/app/scss/_alerts.scss
+++ b/web-ui/app/scss/_alerts.scss
@@ -21,3 +21,5 @@
     }
   }
 }
+
+@include logo;
diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss
index a623366d..c4cc234b 100644
--- a/web-ui/app/scss/_mixins.scss
+++ b/web-ui/app/scss/_mixins.scss
@@ -308,4 +308,35 @@
   }
 }
 
+@mixin logo {
+  @keyframes hideshow {
+  0% { fill: #2ba6cb; }
+  25% { opacity: 1; }
+  100% { opacity: 0; }
+} 
+
+.logo-part {
+  animation: hideshow 0.6s ease infinite;
+  opacity: 1;
+
+  &:nth-child(2) {
+    opacity: 0;
+    animation-delay: 0.1s;
+  }
+
+  &:nth-child(3) {
+    animation-delay: 0.2s;
+  }
+  &:nth-child(4) {
+    animation-delay: 0.3s;
+  }
+  &:nth-child(5) {
+    animation-delay: 0.4s;
+  }
+  &:nth-child(6) {
+    animation-delay: 0.5s;
+  }
+}
+}
+
 @include tt-hint;