Update UI

Author: zxdong262

src/css/home.styl

@@ -1,4 +1,5 @@
 @require './common.styl'
+
 .container
   display flex
   flex-wrap wrap
@@ -38,7 +39,7 @@ ul
     vertical-align middle
     margin 0 8px 8px 0
   img
-    max-height 32px
+    max-height 40px
     height auto
 
 .langs
@@ -78,8 +79,8 @@ ul
 
   .download-btn
     display inline-block
-    background #fff
-    color #333
+    background linear-gradient(45deg, #007bff 0%, #28a745 100%)
+    color #fff
     text-decoration none
     padding 15px 30px
     border 2px solid #333
@@ -91,7 +92,7 @@ ul
     &:hover
       background #333
       color #fff
-      
+
     .btn-content
       display block
       text-align center
@@ -109,6 +110,26 @@ ul
     font-size 0.9em
     color #666
 
+// Morph animation styles for download button
+.morph-shape
+  background linear-gradient(45deg, #007bff 0%, #28a745 100%)
+  animation morph 8s ease-in-out infinite
+  border-radius 60% 40% 30% 70% / 60% 30% 70% 40%
+  transition all 1s ease-in-out
+  z-index 5
+  position relative
+
+@keyframes morph
+  0%
+    border-radius 60% 40% 30% 70% / 60% 30% 70% 40%
+    background linear-gradient(45deg, #007bff 0%, #28a745 100%)
+  50%
+    border-radius 30% 60% 70% 40% / 50% 60% 30% 60%
+    background linear-gradient(45deg, #6c757d 0%, #28a745 100%)
+  100%
+    border-radius 60% 40% 30% 70% / 60% 30% 70% 40%
+    background linear-gradient(45deg, #007bff 0%, #28a745 100%)
+
 .download-options
   .download-tabs
     .tab-buttons

src/views/parts/download.pug

@@ -109,7 +109,7 @@
 
           // Update when page loads
           document.addEventListener('DOMContentLoaded', updateDownloadButton);
-        
+
         .download-button-container
           a#primary-download-btn.download-btn.primary(href="#" style="display:none")
             .btn-content

src/views/parts/title.pug

@@ -1,4 +1,4 @@
-h1
+h1.morph-shape
   span.hide electerm
   img(src='https://electerm.html5beta.com/electerm.png', alt='electerm')
 .pd2y