feat: update toolbar (#7)

assets/css/blog/social-media.css

@@ -85,4 +85,10 @@
   .social-media-item span {
     display: none;
   }
+}
+
+@media screen and (min-width: 767px) {
+  .social-media {
+    display: none!important;
+  }
 }

assets/css/blog/toolbar.css

@@ -0,0 +1,79 @@
+.toolbar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 16px;
+  gap: 24px;
+  position: fixed;
+  z-index: 99;
+  bottom: 60px;
+  right: 50%;
+  transform: translateX(50%);
+  min-width: 550px;
+  height: 82px;
+  background: #ffffff;
+  border: 1px solid #ebebeb;
+  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
+  border-radius: 8px;
+}
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0px;
+  gap: 4px;
+  height: 50px;
+}
+.content > span {
+  font-family: 'SF Pro Display';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 22px;
+  display: flex;
+  align-items: center;
+  color: #1d2129;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.slogan {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0px;
+  gap: 8px;
+  font-family: 'SF Pro Display';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 24px;
+  color: #1d2129;
+  flex-shrink: 0;
+}
+.toolbar a {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 6px 16px;
+  gap: 10px;
+  background: #654aec;
+  border-radius: 4px;
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 22px;
+  text-transform: capitalize;
+  color: #ffffff;
+}
+.toolbar a:hover {
+  background: #775ff2;
+}
+@media (max-width: 767px) {
+  .toolbar {
+    display: none!important;
+  }
+}

assets/css/screen.css

@@ -13,4 +13,5 @@
 @import "blog/related.css";
 @import "misc/utilities.css";
 @import "blog/social-media.css";
-@import "site/footer.css"
+@import "site/footer.css";
+@import "blog/toolbar.css"

assets/js/main.js

@@ -3,6 +3,7 @@
     const shareList = document.querySelector('.share-list')
     const footerListContainer = document.querySelector('.footer-container')
     const socialMedia = document.querySelector('.social-media')
+    const toolbar = document.querySelector('.toolbar')
     const threshold = 100 // 距离底部的距离
     const  throttle = (func, delay) => {
         let timer = null;
@@ -26,11 +27,25 @@
     const handleScroll = () => {
         const {scrollTop, clientHeight, scrollHeight} = document.documentElement
         const val = scrollTop + clientHeight + threshold
-        if(!socialMedia) return
+        if(!socialMedia && !toolbar) return
         if(val < scrollHeight) {
-            socialMedia.style.display = 'flex'
+            if(toolbar) {
+                toolbar.style.display = 'flex'
+                return
+            }
+            if(socialMedia) {
+                socialMedia.style.display = 'flex'
+                return
+            }
         } else {
-            socialMedia.style.display = 'none'
+            if(toolbar) {
+                toolbar.style.display = 'none'
+                return
+            }
+            if(socialMedia) {
+                socialMedia.style.display = 'none'
+                return
+            }
         }
     }
     share &&  share.addEventListener('click', (event) => {

default.hbs

@@ -42,14 +42,15 @@
                     {{^match @custom.navigation_layout "Stacked"}}
                         <button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
                     {{/match}}
-                    <a class="gh-head-btn gh-btn gh-primary-btn" href="https://cloud.illacloud.com" target="_blank" >SIGN IN</a>
+                    <a class="gh-head-btn gh-btn gh-primary-btn" href="https://cloud.illacloud.com" target="_blank" onclick="gtag_report_conversion()">SIGN IN</a>
             </div>
         </div>
     </header>
 
     <div class="site-content">
         {{{body}}}
     </div>
+    {{> "toolbar"}}
 
     <footer class="gh-foot gh-outer">
         {{> "footer"}}

partials/icons/illa.hbs

@@ -0,0 +1,5 @@
+<svg width="34" height="16" viewBox="0 0 34 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 0H10.4V16H6V0ZM0 6H4.4V16H0V6ZM16.4 0H12V16H16.4V0Z" fill="#654AEC"/>
+<rect width="4.4" height="4.4" fill="#FF58BE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.6 8C29.6 9.98823 27.9882 11.6 26 11.6C24.0118 11.6 22.4 9.98823 22.4 8C22.4 6.01178 24.0118 4.4 26 4.4C27.9882 4.4 29.6 6.01178 29.6 8ZM29.6 15.1462V16H34L34 8C34 3.58172 30.4183 0 26 0C21.5817 0 18 3.58172 18 8C18 12.4183 21.5817 16 26 16C27.2949 16 28.5179 15.6924 29.6 15.1462Z" fill="#654AEC"/>
+</svg>

partials/toolbar.hbs

@@ -0,0 +1,11 @@
+<div class="toolbar">
+  <div class="content">
+    <div class="slogan">
+      <span>Try </span>
+      {{> "icons/illa"}}
+      <span>Free</span>
+    </div>
+    <span>Faster solutions at internal tools, dashboards, CRUD apps.</span>
+  </div>
+  <a href="#">Try For Free</a>
+</div>