feature: add subscribe Form in blog page and quick-start

Signed-off-by: TheYoungManLi <1512298456@qq.com>
This commit is contained in:
TheYoungManLi 2021-08-31 10:46:20 +08:00
parent 849aee656d
commit 0ab9d3344a
7 changed files with 1007 additions and 508 deletions

View File

@ -201,4 +201,122 @@
}
}
}
}
.SubscribeForm {
position: fixed;
right: 49px;
bottom: 32px;
box-shadow: 0px 8px 16px rgba(36, 46, 66, 0.05), 0px 4px 8px rgba(36, 46, 66, 0.06);
.innerBox {
width: 440px;
height: 246px;
overflow: hidden;
background: url('/images/home/modal-noText.svg');
position: relative;
padding: -8px -16px;
background-position: -16px -8px;
.close {
position: absolute;
top: 24px;
right: 24px;
cursor: pointer;
}
p {
width: 360px;
height: 44px;
left: 40px;
top: 103px;
right: 40px;
position: absolute;
font-family: ProximaNova;
font-size: 16px;
line-height: 22px;
color: #919AA3;
}
div {
bottom: 32px;
left: 40px;
position: absolute;
width: 358px;
height: 48px;
margin-top: 20px;
border-radius: 24px;
border: solid 1px #ccd3db;
background-color: #f5f8f9;
@mixin placeholder {
font-family: PingFangSC;
font-size: 14px;
line-height: 16px;
text-align: right;
color: #CCD3DB;
}
input {
width: 207px;
height: 20px;
font-size: 14px;
margin-left: 16px;
color: #ccd3db;
border: none;
outline: none;
background-color: #f5f8f9;
&:-webkit-input-placeholder {
@include placeholder();
}
&:-ms-input-placeholder {
@include placeholder();
}
&:-moz-placeholder {
@include placeholder();
}
&:-moz-placeholder {
@include placeholder();
}
}
button {
width: 111px;
height: 40px;
margin: 4px 5px 4px 14px;
border-radius: 20px;
border: none;
font-size: 14px;
color: #ffffff;
cursor: pointer;
box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 97%), linear-gradient(to bottom, #55bc8a, #55bc8a);
&:hover {
box-shadow: none;
}
}
@media only screen and (max-width: $mobile-max-width) {
width: 326px;
input {
width: 196px;
}
button {
width: 90px;
}
}
span {
color: red;
}
}
}
}

View File

@ -1,7 +1,8 @@
@import "variables";
@import "markdown";
html, body {
html,
body {
background: #ffffff;
height: 100%;
min-height: 100%;
@ -41,7 +42,8 @@ main {
.title-div {
height: 20px;
margin-top: 20px;
margin-top: 20px;
p {
display: inline-block;
vertical-align: middle;
@ -78,12 +80,12 @@ main {
right: 0px;
width: 560px;
margin-top: 20px;
@media only screen and (max-width: $mobile-max-width) {
position: relative;
width: 100%;
position: relative;
width: 100%;
}
}
}
}
.section-menu {
@ -94,38 +96,40 @@ main {
transform: translateY(-5px);
z-index: 5;
& > div {
&>div {
padding: 30px 20px;
border-radius: 4px;
box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
background-color: #ffffff;
& > ul {
& > li {
&>ul {
&>li {
width: 243px;
float: left;
& > p {
&>p {
padding-bottom: 12px;
font-size: 16px;
line-height: 1.5;
color: #333333;
border-bottom: 1px solid #d2e0d8;
img {
display: none;
}
}
ul {
li {
margin: 12px 0;
font-size: 14px;
line-height: 1.5;
& > a {
&>a {
color: #31383e;
&:hover {
color: #00aa72
color: #00aa72
}
}
}
@ -138,7 +142,7 @@ main {
.section-2 {
padding-top: 20px;
& > div {
&>div {
position: relative;
}
@ -193,14 +197,15 @@ main {
font-size: 14px;
color: #31383e;
background-color: #f6f8fa;
ul {
display: none;
}
.ul-active {
display: block;
}
li {
margin: 5px 0;
line-height: 24px;
@ -210,7 +215,7 @@ main {
color: #31383e;
}
}
p {
position: relative;
cursor: pointer;
@ -233,15 +238,16 @@ main {
border: 5px solid transparent;
border-left-color: #aeb8c1;
}
.arrow-open {
transform: rotate(90deg) translate(3px, 3px);
}
}
p + ul {
p+ul {
margin-left: 15px;
}
.active a {
color: rgb(85, 188, 138);
}
@ -271,6 +277,7 @@ main {
&:hover {
color: #56bc8a;
.download-icon {
background-image: url("/images/docs/downgrade-hover.svg");
}
@ -297,6 +304,7 @@ main {
.contributor-div {
margin-bottom: 10px;
span {
font-size: 12px;
line-height: 22px;
@ -332,12 +340,13 @@ main {
font-size: 14px;
line-height: 16px;
color: #3f5264;
& > div {
&>div {
vertical-align: middle;
margin-left: 10px;
cursor: pointer;
span {
span {
display: inline-block;
vertical-align: middle;
}
@ -350,17 +359,19 @@ main {
margin-left: 0;
}
}
.edit-div {
.icon-span {
background-image: url("/images/docs/edit.svg");
}
&:hover {
color: #56bc8a;
.icon-span {
background-image: url("/images/docs/edit-hover.svg");
}
a {
color: #56bc8a;
}
@ -373,26 +384,32 @@ main {
background-image: url("/images/docs/feedback.svg");
}
&:hover {
.icon-span {
background-image: url("/images/docs/feedback-hover.svg");
}
}
a {
color: #56bc8a;
}
}
}
}
.share-div {
position: relative;
.icon-span {
background-image: url("/images/docs/share.svg");
}
&:hover {
color: #56bc8a;
.icon-span {
background-image: url("/images/docs/share-hover.svg");
}
ul {
display: block;
}
@ -402,7 +419,7 @@ main {
display: none;
position: absolute;
bottom: 0;
left: 50%;
left: 50%;
transform: translate(-50%, 100%);
width: 70px;
padding: 6px 12px;
@ -417,12 +434,14 @@ main {
img {
vertical-align: middle;
}
a {
font-size: 12px;
color: #3f5264;
&:hover {
color: #56bc8a;
}
}
}
}
}
@ -442,20 +461,20 @@ main {
line-height: 2.29;
color: #36435c;
}
.md-body h2 {
font-weight: 500;
line-height: 40px;
text-shadow: none;
text-align: left;
}
.md-body h3 {
font-weight: 600;
line-height: 1.5;
color: #171c34;
}
.md-body img {
max-width: 100%;
box-sizing: content-box;
@ -463,30 +482,30 @@ main {
border-radius: 5px;
box-shadow: none;
}
.md-body blockquote {
padding: 4px 20px 4px 12px;
border-radius: 4px;
background-color: #ecf0f2;
}
&-metadata {
margin-bottom: 28px;
&-title {
font-size: 16px;
font-weight: 500;
line-height: 1.5;
color: #171c34;
}
&-time {
font-size: 14px;
line-height: 1.43;
color: #919aa3;
font-size: 14px;
line-height: 1.43;
color: #919aa3;
}
}
&-title {
text-shadow: 0 8px 16px rgba(35, 45, 65, 0.1);
font-size: 40px;
@ -494,7 +513,7 @@ main {
line-height: 1.4;
color: #171c34;
margin-bottom: 40px;
@media only screen and (max-width: $mobile-max-width) {
font-size: 28px;
}
@ -510,13 +529,13 @@ main {
margin-left: 5px;
border-radius: 3px;
background-color: #f6f8fa;
@media only screen and (max-width: $mobile-max-width) {
display: block;
width: 100%;
margin-left: 0;
}
img {
position: absolute;
top: 50%;
@ -527,12 +546,12 @@ main {
padding: 12px;
border-radius: 7px;
box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
background-color: #ffffff;
background-color: #ffffff;
}
div {
margin-left: 84px;
h2 {
height: 24px;
margin: 0;
@ -540,16 +559,16 @@ main {
font-size: 16px;
line-height: 1.5;
overflow: hidden;
a {
color: #333333;
&:hover {
color: #00a971;
}
}
}
p {
max-height: 42px;
margin-top: 8px;
@ -561,7 +580,7 @@ main {
}
}
}
}
.page-div {
@ -575,6 +594,7 @@ main {
font-size: 14px;
line-height: 1.71;
color: #3f5264;
img {
vertical-align: middle;
}
@ -607,8 +627,9 @@ main {
left: 50%;
transform: translateX(400px);
width: 180px;
@media only screen and (max-width: $mobile-max-width) {
display: none;
display: none;
}
.inner-div {
@ -623,22 +644,23 @@ main {
line-height: 1.71;
color: #3e464c;
}
.tabs {
#TableOfContents > ul > li > a {
#TableOfContents>ul>li>a {
font-weight: 500;
}
li {
margin: 8px 0;
font-size: 14px;
a {
display: block;
width: 100%;
font-weight: 400;
line-height: 24px;
color: #68747f;
&:hover {
color: #00a971;
}
@ -648,6 +670,7 @@ main {
color: #00a971;
}
}
li li {
padding-left: 20px;
}
@ -660,137 +683,142 @@ footer {
padding: 20px 0;
.down-main {
text-align: center;
.img-div {
font-size: 0;
text-align: center;
svg {
width: 32px;
height: 32px;
color: #b6c2cd;
cursor: pointer;
transition: all 0.2s ease-in-out;
margin-right: 8px;
}
.img-div {
font-size: 0;
a {
display: inline-block;
width: 34px;
height: 34px;
margin: 0 6px;
background-position: center;
background-repeat: no-repeat;
}
.wechat {
position: relative;
.hide-div {
display: none;
position: absolute;
top: -10px;
left: 50%;
padding: 10px;
transform: translate(-50%, -100%);
background: #ffffff;
p {
font-size: 12px;
color: #b6c2cd;
}
img {
margin: 0 10px;
}
&::after {
content: '';
position: absolute;
bottom: -18px;
left: 50%;
transform: translateX(-50%);
border: 10px solid transparent;
border-top-color: #ffffff;
}
}
&:hover {
svg {
color: green;
width: 32px;
height: 32px;
color: #b6c2cd;
cursor: pointer;
transition: all 0.2s ease-in-out;
margin-right: 8px;
}
div {
display: block;
a {
display: inline-block;
width: 34px;
height: 34px;
margin: 0 6px;
background-position: center;
background-repeat: no-repeat;
}
.wechat {
position: relative;
.hide-div {
display: none;
position: absolute;
top: -10px;
left: 50%;
padding: 10px;
transform: translate(-50%, -100%);
background: #ffffff;
p {
font-size: 12px;
color: #b6c2cd;
}
img {
margin: 0 10px;
}
&::after {
content: '';
position: absolute;
bottom: -18px;
left: 50%;
transform: translateX(-50%);
border: 10px solid transparent;
border-top-color: #ffffff;
}
}
&:hover {
svg {
color: green;
}
div {
display: block;
}
}
}
.facebook-a {
background-image: url("/images/footer/facebook.svg");
&:hover {
background-image: url("/images/footer/facebook-hover.svg");
}
}
.youtube-a {
background-image: url("/images/footer/youtube.svg");
&:hover {
background-image: url("/images/footer/youtube-hover.svg");
}
}
.slack-a {
background-image: url("/images/footer/slack.svg");
&:hover {
background-image: url("/images/footer/slack-hover.svg");
}
}
.twitter-a {
background-image: url("/images/footer/twitter.svg");
&:hover {
background-image: url("/images/footer/twitter-hover.svg");
}
}
.github-a {
background-image: url("/images/footer/github.svg");
&:hover {
background-image: url("/images/footer/github-hover.svg");
}
}
.medium-a {
background-image: url("/images/footer/medium.svg");
&:hover {
background-image: url("/images/footer/medium-hover.svg");
}
}
.linkedin-a {
background-image: url("/images/footer/linkedin.svg");
&:hover {
background-image: url("/images/footer/linkedin-hover.svg");
}
}
}
}
.facebook-a {
background-image: url("/images/footer/facebook.svg");
&:hover {
background-image: url("/images/footer/facebook-hover.svg");
}
.p1 {
height: 23px;
margin-top: 6px;
font-size: 14px;
line-height: 23px;
font-weight: 500;
letter-spacing: 1.08px;
color: #242e42;
}
.youtube-a {
background-image: url("/images/footer/youtube.svg");
&:hover {
background-image: url("/images/footer/youtube-hover.svg");
}
.case {
margin-top: 20px;
}
.slack-a {
background-image: url("/images/footer/slack.svg");
&:hover {
background-image: url("/images/footer/slack-hover.svg");
}
}
.twitter-a {
background-image: url("/images/footer/twitter.svg");
&:hover {
background-image: url("/images/footer/twitter-hover.svg");
}
}
.github-a {
background-image: url("/images/footer/github.svg");
&:hover {
background-image: url("/images/footer/github-hover.svg");
}
}
.medium-a {
background-image: url("/images/footer/medium.svg");
&:hover {
background-image: url("/images/footer/medium-hover.svg");
}
}
.linkedin-a {
background-image: url("/images/footer/linkedin.svg");
&:hover {
background-image: url("/images/footer/linkedin-hover.svg");
}
}
}
.p1 {
height: 23px;
margin-top: 6px;
font-size: 14px;
line-height: 23px;
font-weight: 500;
letter-spacing: 1.08px;
color: #242e42;
}
.case {
margin-top: 20px;
}
}
}
@ -817,4 +845,95 @@ footer {
background-color: #55BC8A;
}
}
.SubscribeForm {
.innerBox {
margin-top: 32px;
p {
width: 360px;
font-family: ProximaNova;
font-size: 16px;
line-height: 22px;
color: #919AA3;
margin: 0;
}
div {
width: 358px;
margin-top: 20px;
border-radius: 24px;
border: solid 1px #ccd3db;
background-color: #f5f8f9;
@mixin placeholder {
font-family: PingFangSC;
font-size: 14px;
line-height: 16px;
text-align: right;
color: #CCD3DB;
}
input {
width: 207px;
height: 20px;
font-size: 14px;
margin-left: 16px;
color: #ccd3db;
border: none;
outline: none;
background-color: #f5f8f9;
&:-webkit-input-placeholder {
@include placeholder();
}
&:-ms-input-placeholder {
@include placeholder();
}
&:-moz-placeholder {
@include placeholder();
}
&:-moz-placeholder {
@include placeholder();
}
}
button {
width: 111px;
height: 40px;
margin: 4px 5px 4px 14px;
border-radius: 20px;
border: none;
font-size: 14px;
color: #ffffff;
cursor: pointer;
box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 97%), linear-gradient(to bottom, #55bc8a, #55bc8a);
&:hover {
box-shadow: none;
}
}
@media only screen and (max-width: $mobile-max-width) {
width: 326px;
input {
width: 196px;
}
button {
width: 90px;
}
}
}
span {
color: red;
}
}
}

View File

@ -3,7 +3,8 @@ title: "All-in-One Installation of Kubernetes and KubeSphere on Linux"
keywords: 'KubeSphere, Kubernetes, All-in-One, Installation'
description: 'Install KubeSphere on Linux with a minimal installation package. The tutorial serves as a basic kick-starter for you to understand the container platform, paving the way for learning the following guides.'
linkTitle: "All-in-One Installation on Linux"
weight: 2100
weight: 2100,
showSubscribe: true
---
For those who are new to KubeSphere and looking for a quick way to discover the [container platform](https://kubesphere.io/), the all-in-one mode is your best choice to get started. It features rapid deployment and hassle-free configurations with KubeSphere and Kubernetes all provisioned on your machine.

View File

@ -3,7 +3,8 @@ title: "Minimal KubeSphere on Kubernetes"
keywords: 'KubeSphere, Kubernetes, Minimal, Installation'
description: 'Install KubeSphere on an existing Kubernetes cluster with a minimal installation package. Your Kubernetes cluster can be hosted on cloud or on-premises.'
linkTitle: "Minimal KubeSphere on Kubernetes"
weight: 2200
weight: 2200,
showSubscribe: true
---
In addition to installing KubeSphere on a Linux machine, you can also deploy it on existing Kubernetes clusters. This tutorial demonstrates the general steps of completing a minimal KubeSphere installation on Kubernetes. For more information, see [Installing on Kubernetes](../../installing-on-kubernetes/).

View File

@ -1,190 +1,221 @@
<!DOCTYPE html>
<html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en-US{{ end }}">
<head>
{{- partial "head.html" . -}}
</head>
<body>
{{ if .Site.Params.addGoogleTag }}
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W9FLX4R"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
{{ end }}
{{- partial "header.html" . -}}
<main class='main-section padding'>
<section class='section-1 bg-cover'>
<div class="common-layout">
{{ partial "breadcrumb.html" . }}
<div class="title-div">
{{ $sections := .FirstSection.Sections.ByWeight }}
{{ $secondSection := .FirstSection }}
{{ $page := . }}
{{ range $sections }}
{{ if .Site.Params.addGoogleTag }}
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W9FLX4R" height="0" width="0"
style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
{{ end }}
{{- partial "header.html" . -}}
<main class='main-section padding'>
<section class='section-1 bg-cover'>
<div class="common-layout">
{{ partial "breadcrumb.html" . }}
<div class="title-div">
{{ $sections := .FirstSection.Sections.ByWeight }}
{{ $secondSection := .FirstSection }}
{{ $page := . }}
{{ range $sections }}
{{ if $page.IsDescendant . }}
{{ $secondSection = . }}
{{ $secondSection = . }}
{{ end }}
{{ end }}
<p><a href="{{ $secondSection.RelPermalink }}">{{ $secondSection.LinkTitle }}</a></p>
<div class="menu section-control">
<div></div>
<div></div>
<div></div>
{{ end }}
<p><a href="{{ $secondSection.RelPermalink }}">{{ $secondSection.LinkTitle }}</a></p>
<div class="menu section-control">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="search-div">
{{ partial "searchInput" . }}
</div>
</div>
<div class="search-div">
{{ partial "searchInput" . }}
</section>
<section class="section-menu">
{{ with (.GetPage "/docs") }}
<div class="common-layout">
{{ partial "section" . }}
</div>
</div>
</section>
<section class="section-menu">
{{ with (.GetPage "/docs") }}
<div class="common-layout">
{{ partial "section" . }}
</div>
{{ end }}
</section>
<section class="section-2">
<div class="common-layout">
<div class="left-div left-tree">
<div class="inner-tree">
{{ partial "tree.html" . }}
<!-- <div class="download-div">
{{ end }}
</section>
<section class="section-2">
<div class="common-layout">
<div class="left-div left-tree">
<div class="inner-tree">
{{ partial "tree.html" . }}
<!-- <div class="download-div">
<span class="download-icon"></span>
<span>{{ i18n "Download this page (PDF)" }}</span>
</div> -->
</div>
</div>
<div class="second-section-menu">
<div></div>
<div></div>
<div></div>
</div>
<div class="middle-div">
<div class="top-div common-flex-layout">
<div class="contributor-div">
<span>{{ i18n "Last updated" }}:</span>
<span class="update-time"></span>
<a href="{{ .Site.Params.githubBlobUrl }}/{{ .Site.Language.Lang }}/{{ .File.Path }}" target="_blank" rel="noopener noreferrer">
<ul class="contributor-avatar"></ul>
</a>
<span class="more-contributor"></span>
</div>
<div class="mutual-div common-flex-layout">
<div class="edit-div">
<a href="{{ .Site.Params.githubEditUrl }}/{{ .Site.Language.Lang }}/{{ .File.Path }}" target="_blank" rel="noopener noreferrer">
<span class="icon-span"></span>
<span>{{ i18n "edit" }}</span>
</div>
<div class="second-section-menu">
<div></div>
<div></div>
<div></div>
</div>
<div class="middle-div">
<div class="top-div common-flex-layout">
<div class="contributor-div">
<span>{{ i18n "Last updated" }}:</span>
<span class="update-time"></span>
<a href="{{ .Site.Params.githubBlobUrl }}/{{ .Site.Language.Lang }}/{{ .File.Path }}"
target="_blank" rel="noopener noreferrer">
<ul class="contributor-avatar"></ul>
</a>
<span class="more-contributor"></span>
</div>
<div class="feedback-div">
<a href="{{ .Site.Params.githubUrl }}/issues/new" target="_blank" rel="noopener noreferrer">
<span class="icon-span"></span>
<span>{{ i18n "feedback" }}</span>
</a>
</div>
<div class="share-div">
<div>
<span class="icon-span"></span>
<span>{{ i18n "share" }}</span>
<div class="mutual-div common-flex-layout">
<div class="edit-div">
<a href="{{ .Site.Params.githubEditUrl }}/{{ .Site.Language.Lang }}/{{ .File.Path }}"
target="_blank" rel="noopener noreferrer">
<span class="icon-span"></span>
<span>{{ i18n "edit" }}</span>
</a>
</div>
<div class="feedback-div">
<a href="{{ .Site.Params.githubUrl }}/issues/new" target="_blank"
rel="noopener noreferrer">
<span class="icon-span"></span>
<span>{{ i18n "feedback" }}</span>
</a>
</div>
<div class="share-div">
<div>
<span class="icon-span"></span>
<span>{{ i18n "share" }}</span>
</div>
<ul>
<li>
<img src="/images/docs/twitter.svg" alt="twitter">
<a href="https://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}"
target="_blank" rel="noopener noreferrer">twitter</a>
</li>
<li>
<img src="/images/docs/linkedIn.svg" alt="linkedIn">
<a href="http://www.linkedin.com/shareArticle?mini=true&url={{ .Permalink }}"
target="_blank" rel="noopener noreferrer">linkedIn</a>
</li>
<li>
<img src="/images/docs/facebook.svg" alt="facebook">
<a href="http://www.facebook.com/sharer.php?u={{ .Permalink }}" target="_blank"
rel="noopener noreferrer">facebook</a>
</li>
<li>
<img src="/images/docs/reddit.svg" alt="reddit">
<a href="http://reddit.com/submit?url={{ .Permalink }}&title={{ .Title }}"
target="_blank" rel="noopener noreferrer">reddit</a>
</li>
<li>
<img src="/images/docs/email.svg" alt="email">
<a href="mailto:info@kubesphere.io" target="_blank"
rel="noopener noreferrer">email</a>
</li>
</ul>
</div>
<ul>
<li>
<img src="/images/docs/twitter.svg" alt="twitter">
<a href="https://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}" target="_blank" rel="noopener noreferrer">twitter</a>
</li>
<li>
<img src="/images/docs/linkedIn.svg" alt="linkedIn">
<a href="http://www.linkedin.com/shareArticle?mini=true&url={{ .Permalink }}" target="_blank" rel="noopener noreferrer">linkedIn</a>
</li>
<li>
<img src="/images/docs/facebook.svg" alt="facebook">
<a href="http://www.facebook.com/sharer.php?u={{ .Permalink }}" target="_blank" rel="noopener noreferrer">facebook</a>
</li>
<li>
<img src="/images/docs/reddit.svg" alt="reddit">
<a href="http://reddit.com/submit?url={{ .Permalink }}&title={{ .Title }}" target="_blank" rel="noopener noreferrer">reddit</a>
</li>
<li>
<img src="/images/docs/email.svg" alt="email" >
<a href="mailto:info@kubesphere.io" target="_blank" rel="noopener noreferrer">email</a>
</li>
</ul>
</div>
</div>
</div>
<div class="content-div main-div">
<div class="md-body">
<h1>{{ .Title }}</h1>
{{ .Content }}
<section class="feedback-section">
<p class="title">{{ i18n "feedback"}}</p>
<p>{{i18n "Was this page Helpful?"}}</p>
<button class="Yes">{{ i18n "Yes" }}</button>
<button class="No">{{ i18n "No" }}</button>
</section>
<br>
<p class="msg-thank">{{ i18n "Msg-Thank" }}</p>
<div class="content-div main-div">
<div class="md-body">
<h1>{{ .Title }}</h1>
{{ .Content }}
<section class="feedback-section">
<p class="title">{{ i18n "feedback"}}</p>
<p>{{i18n "Was this page Helpful?"}}</p>
<button class="Yes">{{ i18n "Yes" }}</button>
<button class="No">{{ i18n "No" }}</button>
</section>
{{if eq .Site.LanguageCode "en-US"}}
{{if .Params.showSubscribe }}
<div class="SubscribeForm">
<div class="innerBox">
<p class="description">
Sign up for latest tutorials and Kubernetes tips
</p>
<div>
<form action="{{ .Site.Params.mailchimpSubscribeUrl }}" method="post"
target="_blank" novalidate>
<input name="EMAIL" id="email-input" type="text"
placeholder='{{ i18n "Please enter your email address" }}'>
<button type="submit" id="email-submit">{{ i18n "Subscribe" }}</button>
</form>
</div>
<span id="message" data-message1='{{ i18n "email is required" }}'
data-message2='{{ i18n "Please enter a valid email address." }}'></span>
</div>
</div>
{{end}}
{{end}}
<br>
<p class="msg-thank">{{ i18n "Msg-Thank" }}</p>
</div>
</div>
</div>
{{ if .IsPage }}
<div class="page-div common-flex-layout">
{{ with .Next }}
<!-- {{ if .IsDescendant (.GetPage "/docs")}} -->
{{ if .IsPage }}
<div class="page-div common-flex-layout">
{{ with .Next }}
<!-- {{ if .IsDescendant (.GetPage "/docs")}} -->
<a class="last" href="{{.RelPermalink}}">
<img src="/images/docs/last.svg" alt="{{ i18n "Previous" }}">
<img src="/images/docs/last.svg" alt="{{ i18n " Previous" }}">
{{ i18n "Previous" }}
<span>: {{.LinkTitle}}</span>
</a>
<!-- {{ end }} -->
{{ end }}
{{ with .Prev }}
<!-- {{ if .IsDescendant (.GetPage "/docs")}} -->
<!-- {{ end }} -->
{{ end }}
{{ with .Prev }}
<!-- {{ if .IsDescendant (.GetPage "/docs")}} -->
<a class="next" href="{{.RelPermalink}}">
{{ i18n "Next" }}
<span>: {{.LinkTitle}}</span>
<img src="/images/docs/next.svg" alt="{{ i18n "Next" }}">
</a>
<!-- {{ end }} -->
<img src="/images/docs/next.svg" alt="{{ i18n " Next" }}">
</a>
<!-- {{ end }} -->
{{ end }}
</div>
{{ end }}
<div></div>
</div>
{{ if .IsPage }}
<div class="aside">
<div class="inner-div">
<div class='title'>
{{ i18n "Whats on this Page" }}
</div>
<div class='tabs'>
{{ .TableOfContents }}
</div>
</div>
</div>
{{ end }}
<div></div>
</div>
{{ if .IsPage }}
<div class="aside">
<div class="inner-div">
<div class='title'>
{{ i18n "Whats on this Page" }}
</div>
<div class='tabs'>
{{ .TableOfContents }}
</div>
</div>
</div>
{{ end }}
</div>
</section>
{{ $aside := resources.Get "js/aside.js" }}
{{ $asideJS := $aside | resources.Fingerprint "sha512" }}
<script type="text/javascript" src="{{ $asideJS.RelPermalink }}" integrity="{{ $asideJS.Data.Integrity }}"></script>
{{ $tab := resources.Get "js/markdown-tab.js" }}
{{ $tabJS := $tab | resources.Fingerprint "sha512" }}
<script type="text/javascript" src="{{ $tabJS.RelPermalink }}" integrity="{{ $tabJS.Data.Integrity }}"></script>
<script>
var languageCode = '{{.Site.Language.Lang}}'
var filePath = '{{ .File.Path }}'
var githubUrl = '{{ .Site.Params.githubUrl }}'
// var filePath = 'README.md'
var Yes = $('button.Yes');
</section>
{{ $aside := resources.Get "js/aside.js" }}
{{ $asideJS := $aside | resources.Fingerprint "sha512" }}
<script type="text/javascript" src="{{ $asideJS.RelPermalink }}"
integrity="{{ $asideJS.Data.Integrity }}"></script>
{{ $tab := resources.Get "js/markdown-tab.js" }}
{{ $tabJS := $tab | resources.Fingerprint "sha512" }}
<script type="text/javascript" src="{{ $tabJS.RelPermalink }}" integrity="{{ $tabJS.Data.Integrity }}"></script>
<script>
var languageCode = '{{.Site.Language.Lang}}'
var filePath = '{{ .File.Path }}'
var githubUrl = '{{ .Site.Params.githubUrl }}'
// var filePath = 'README.md'
var Yes = $('button.Yes');
var No = $('button.No');
var msg = $('p.msg-thank')
msg.hide()
@ -204,138 +235,182 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
No.css("pointer-events", "none");
msg.show()
})
var getLatestTime = function(data) {
var commit = data[0].commit
return commit.author.date.replace("T", " ").replace("Z", "")
}
var filterData = function(data) {
var arr = []
var length = data.length
for (var i = 0; i < length; i++) {
var author = data[i].author
if (author) {
var avatar_url = author.avatar_url
if (avatar_url && !arr.includes(avatar_url)) {
arr.push(avatar_url)
var getLatestTime = function (data) {
var commit = data[0].commit
return commit.author.date.replace("T", " ").replace("Z", "")
}
var filterData = function (data) {
var arr = []
var length = data.length
for (var i = 0; i < length; i++) {
var author = data[i].author
if (author) {
var avatar_url = author.avatar_url
if (avatar_url && !arr.includes(avatar_url)) {
arr.push(avatar_url)
}
}
}
return arr
}
return arr
}
var getFileContributors = function() {
var url = 'https://api.github.com/repos/kubesphere/website/commits?path=content/' + languageCode + '/' + filePath
$.getJSON(url, function(data) {
if (!data || data.length === 0) {
$('.contributor-div').hide()
return
}
var newData = filterData(data)
var time = getLatestTime(data)
renderLatestTime(time)
renderContributors(newData)
})
}
var renderContributors = function(data) {
var contributor = $('.contributor-avatar')
var length = data.length
var len = 5
$.each(data.slice(0, len), function(index, item) {
var img = $("<img />", {
"src": item
var getFileContributors = function () {
var url = 'https://api.github.com/repos/kubesphere/website/commits?path=content/' + languageCode + '/' + filePath
$.getJSON(url, function (data) {
if (!data || data.length === 0) {
$('.contributor-div').hide()
return
}
var newData = filterData(data)
var time = getLatestTime(data)
renderLatestTime(time)
renderContributors(newData)
})
$("<li />", {
"html": img
}).appendTo(contributor);
});
var t = length - len
if (t > 0) {
$('.more-contributor').html('+' + t)
}
}
var renderLatestTime = function(time) {
$('.update-time').html(time)
}
var bindClickMenu = function() {
var sectionMenu = $(".section-menu")
$('.section-control').on('mouseenter', function(e){
if (sectionMenu.is(":hidden")) {
sectionMenu.show();
}
})
sectionMenu.on('mouseleave', function() {
sectionMenu.hide();
})
$(document).on("click", function(){
sectionMenu.hide()
});
sectionMenu.on("click", function(e){
e.stopPropagation();
})
}
var bindClickSecondMenu = function() {
var sectionMenu = $(".section-2 .left-div")
$('.second-section-menu').on('click', function(e){
sectionMenu.css("left", "0")
$(document).one("click", function(){
sectionMenu.css("left", "-274px")
var renderContributors = function (data) {
var contributor = $('.contributor-avatar')
var length = data.length
var len = 5
$.each(data.slice(0, len), function (index, item) {
var img = $("<img />", {
"src": item
})
$("<li />", {
"html": img
}).appendTo(contributor);
});
e.stopPropagation()
})
sectionMenu.on("click", function(e){
e.stopPropagation();
})
}
var useViewer = function() {
var viewer = new Viewer(document.querySelector('.md-body'), {
url: 'src'
})
}
var __main = function() {
getFileContributors()
bindClickMenu()
bindClickSecondMenu()
useViewer()
}
__main()
</script>
</main>
var t = length - len
if (t > 0) {
$('.more-contributor').html('+' + t)
}
}
<footer>
<div class="down-main">
<div class='img-div'>
<a class='wechat' href="javascript:void(0);">
{{ "/static/images/footer/wechat.svg" | readFile | safeHTML }}
<div class="hide-div">
<p>Follow the official account</p>
<img src="/images/footer/wechat_code.svg" alt="">
</div>
</a>
<a class='facebook-a' href="https://www.facebook.com/kubesphere" target="_blank"></a>
<a class='twitter-a' href="{{ .Site.Params.twitterLink }}" target="_blank" rel="noopener noreferrer"></a>
<a class='linkedin-a' href="{{ .Site.Params.linkedinLink }}" target="_blank" rel="noopener noreferrer"></a>
<a class='youtube-a' href="{{ .Site.Params.youtubeLink }}" target="_blank" rel="noopener noreferrer"></a>
<a class='slack-a' href="{{ .Site.Params.slackLink }}" target="_blank" rel="noopener noreferrer"></a>
<a class='github-a' href="{{ .Site.Params.githubLink }}" target="_blank" rel="noopener noreferrer"></a>
<a class='medium-a' href="{{ .Site.Params.mediumLink }}" target="_blank" rel="noopener noreferrer"></a>
var renderLatestTime = function (time) {
$('.update-time').html(time)
}
var bindClickMenu = function () {
var sectionMenu = $(".section-menu")
$('.section-control').on('mouseenter', function (e) {
if (sectionMenu.is(":hidden")) {
sectionMenu.show();
}
})
sectionMenu.on('mouseleave', function () {
sectionMenu.hide();
})
$(document).on("click", function () {
sectionMenu.hide()
});
sectionMenu.on("click", function (e) {
e.stopPropagation();
})
}
var bindClickSecondMenu = function () {
var sectionMenu = $(".section-2 .left-div")
$('.second-section-menu').on('click', function (e) {
sectionMenu.css("left", "0")
$(document).one("click", function () {
sectionMenu.css("left", "-274px")
});
e.stopPropagation()
})
sectionMenu.on("click", function (e) {
e.stopPropagation();
})
}
var bindSubmit = function () {
var input = $('#email-input')
$('#email-submit').click(function (event) {
event.stopPropagation()
var email = input.val()
var message1 = $('#message').data('message1')
var message2 = $('#message').data('message2')
if (!email) {
event.preventDefault()
showMessage(message1)
} else if (!validateEmail(email)) {
event.preventDefault()
showMessage(message2)
}
})
}
var validateEmail = function (email) {
var reg = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/
return reg.test(email)
}
var showMessage = function (message) {
$('#message').html(message).show()
}
var bindHideMessage = function () {
$(window).click(function () {
$('#message').hide()
})
}
var bindClose = function () {
$('.formBox .close').click(function (e) {
e.stopPropagation()
$('.formBox').fadeOut()
})
}
var useViewer = function () {
var viewer = new Viewer(document.querySelector('.md-body'), {
url: 'src'
})
}
var __main = function () {
getFileContributors()
bindClickMenu()
bindClickSecondMenu()
useViewer()
bindSubmit()
bindClose()
bindHideMessage()
}
__main()
</script>
</main>
<footer>
<div class="down-main">
<div class='img-div'>
<a class='wechat' href="javascript:void(0);">
{{ "/static/images/footer/wechat.svg" | readFile | safeHTML }}
<div class="hide-div">
<p>Follow the official account</p>
<img src="/images/footer/wechat_code.svg" alt="">
</div>
</a>
<a class='facebook-a' href="https://www.facebook.com/kubesphere" target="_blank"></a>
<a class='twitter-a' href="{{ .Site.Params.twitterLink }}" target="_blank"
rel="noopener noreferrer"></a>
<a class='linkedin-a' href="{{ .Site.Params.linkedinLink }}" target="_blank"
rel="noopener noreferrer"></a>
<a class='youtube-a' href="{{ .Site.Params.youtubeLink }}" target="_blank"
rel="noopener noreferrer"></a>
<a class='slack-a' href="{{ .Site.Params.slackLink }}" target="_blank" rel="noopener noreferrer"></a>
<a class='github-a' href="{{ .Site.Params.githubLink }}" target="_blank" rel="noopener noreferrer"></a>
<a class='medium-a' href="{{ .Site.Params.mediumLink }}" target="_blank" rel="noopener noreferrer"></a>
</div>
<p class='p1'>{{ i18n "KubeSphere® 2021 All Rights Reserved." }}</p>
</div>
<p class='p1'>{{ i18n "KubeSphere® 2021 All Rights Reserved." }}</p>
</div>
</footer>
</footer>
</body>
</html>

View File

@ -1,72 +1,148 @@
{{ $context := .context }}
{{ $parent := .parent }}
{{ $text := .text }}
{{ $LanguageCode := .context.Site.Params.LanguageCode }}
{{ $Site := .context.Site}}
<!DOCTYPE html>
<html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en-US{{ end }}">
<head>
{{- partial "head.html" $context -}}
{{ $style := resources.Get "scss/content.scss" | toCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
{{ $style := resources.Get "scss/markdown.scss" | toCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
</head>
<body>
{{ if .Site.Params.addGoogleTag }}
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W9FLX4R"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
{{ end }}
{{ partial "header.html" $context }}
<section class="main-section">
<div class="common-layout">
<div class='breadcrumb'>
{{ $section := $context.FirstSection }}
<span><a href='{{ $parent | relLangURL }}/'>{{ i18n $text }}</a> > </span>
<span>{{ $context.Title }}</span>
</div>
<div class='main-div middle-div'>
<div class='author'>{{ $context.Params.author }}</div>
<div class='date'>{{ i18n "Published on" }}{{ string $context.Params.createTime }}</div>
<h1>{{ $context.Title }}</h1>
<div class="share-1">
{{ partial "share.html" $context }}
</div>
<div class='content'>
<div class='md-body'>
{{ $context.Content }}
</div>
</div>
<div class="share-2">
{{ partial "share.html" $context }}
</div>
</div>
<div class='aside'>
<div class="inner-div">
<div class='title'>{{ i18n "Table of Contents" }}</div>
<div class='tabs'>{{ $context.TableOfContents }}</div>
</div>
</div>
</div>
</section>
{{ partial "footer.html" $context }}
{{ $aside := resources.Get "js/aside.js" }}
{{ $asideJS := $aside | resources.Fingerprint "sha512" }}
<script type="text/javascript" src="{{ $asideJS.RelPermalink }}" integrity="{{ $asideJS.Data.Integrity }}"></script>
{{ $tab := resources.Get "js/markdown-tab.js" }}
{{ $tabJS := $tab | resources.Fingerprint "sha512" }}
<script type="text/javascript" src="{{ $tabJS.RelPermalink }}" integrity="{{ $tabJS.Data.Integrity }}"></script>
<script>
var viewer = new Viewer(document.querySelector('.md-body'), {
url: 'src'
})
</script>
{{ if .Site.Params.addGoogleTag }}
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W9FLX4R" height="0" width="0"
style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
{{ end }}
{{ partial "header.html" $context }}
<section class="main-section">
<div class="common-layout">
<div class='breadcrumb'>
{{ $section := $context.FirstSection }}
<span><a href='{{ $parent | relLangURL }}/'>{{ i18n $text }}</a> > </span>
<span>{{ $context.Title }}</span>
</div>
<div class='main-div middle-div'>
<div class='author'>{{ $context.Params.author }}</div>
<div class='date'>{{ i18n "Published on" }}{{ string $context.Params.createTime }}</div>
<h1>{{ $context.Title }}</h1>
<div class="share-1">
{{ partial "share.html" $context }}
</div>
<div class='content'>
<div class='md-body'>
{{ $context.Content }}
</div>
</div>
<div class="share-2">
{{ partial "share.html" $context }}
</div>
</div>
<div class='aside'>
<div class="inner-div">
<div class='title'>{{ i18n "Table of Contents" }}</div>
<div class='tabs'>{{ $context.TableOfContents }}</div>
</div>
</div>
</div>
</section>
{{ if eq $LanguageCode "en-US"}}
<div class="SubscribeForm">
<div class="innerBox">
<img class="close" src="/images/home/close.svg" alt="close">
<p class="description">
{{ i18n "Receive the latest news, articles and updates from KubeSphere" }}
</p>
<div>
<form action="{{ $Site.Params.mailchimpSubscribeUrl }}" method="post" target="_blank" novalidate>
<input name="EMAIL" id="email-input-blog" type="text"
placeholder='{{ i18n "Please enter your email address" }}'>
<button type="submit" id="email-submit-blog">{{ i18n "Subscribe" }}</button>
</form>
<span id="message_blog" data-message1='{{ i18n "email is required" }}'
data-message2='{{ i18n "Please enter a valid email address." }}'></span>
</div>
</div>
</div>
{{end}}
{{ partial "footer.html" $context }}
{{ $aside := resources.Get "js/aside.js" }}
{{ $asideJS := $aside | resources.Fingerprint "sha512" }}
<script type="text/javascript" src="{{ $asideJS.RelPermalink }}" integrity="{{ $asideJS.Data.Integrity }}"></script>
{{ $tab := resources.Get "js/markdown-tab.js" }}
{{ $tabJS := $tab | resources.Fingerprint "sha512" }}
<script type="text/javascript" src="{{ $tabJS.RelPermalink }}" integrity="{{ $tabJS.Data.Integrity }}"></script>
<script>
let forbidForm = false;
var viewer = new Viewer(document.querySelector('.md-body'), {
url: 'src'
})
var blogBindSubmit = function () {
var input = $('#email-input-blog')
$('#email-submit-blog').click(function (event) {
event.stopPropagation()
var email = input.val()
var message1 = $('#message_blog').data('message1')
var message2 = $('#message_blog').data('message2')
if (!email) {
event.preventDefault()
$('#message_blog').html(message1).show()
} else if (!validateEmail(email)) {
event.preventDefault()
$('#message_blog').html(message2).show()
}
})
}
var validateEmail = function (email) {
var reg = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/
return reg.test(email)
}
var bindHideMessageBlog = function () {
$(window).click(function () {
$('#message_blog').hide()
})
}
var bindCloseBlog = function () {
$('.SubscribeForm .close').click(function (e) {
e.stopPropagation()
$('.SubscribeForm').fadeOut()
window.onscroll = ''
})
}
window.onscroll = () => {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
if (forbidForm) {
window.onscroll = ''
}
if (scrollTop + windowHeight > (scrollHeight - 710)) {
$('.SubscribeForm').hide()
} else {
$('.SubscribeForm').show()
}
}
blogBindSubmit()
bindCloseBlog()
bindHideMessageBlog()
</script>
</body>
</html>

View File

@ -0,0 +1,109 @@
<svg width="472" height="278" viewBox="0 0 472 278" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_dd)">
<rect x="16" y="8" width="440" height="246" rx="4" fill="white" />
<g opacity="0.8">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="16" y="8" width="440" height="246">
<rect x="16" y="8" width="440" height="246" fill="white" />
</mask>
<g mask="url(#mask0)">
<path d="M410.806 480L256 -20H453.261L504 224.571L410.806 480Z" fill="url(#paint0_linear)"
fill-opacity="0.5" />
<path d="M-4 379L149.224 -18H266.729L392 379H-4Z" fill="url(#paint1_linear)" fill-opacity="0.7" />
<path d="M16 318V-20H151L16 318Z" fill="url(#paint2_linear)" />
</g>
</g>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M81 67.4998L74 63V72L81 67.4998Z" fill="#00A971" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M81 46.5L74 42V51L81 46.5Z" fill="#00A971" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M70 40L56 48.4894V65.5113L70 74V61.085L63.2636 57.0002L70 52.9154V40Z" fill="#00A971" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M70 56.5L84 65V48L70 56.5Z" fill="#00A971" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M177.727 48.2876H176.256C175.935 48.2876 175.667 48.5656 175.667 48.8987V56.0097H170.931V48.8987C170.931 48.5656 170.691 48.2876 170.343 48.2876H168.871C168.55 48.2876 168.282 48.5656 168.282 48.8987V65.9564C168.282 66.2903 168.55 66.5679 168.871 66.5679H170.343C170.691 66.5679 170.931 66.2903 170.931 65.9564V58.7601H175.667V65.9564C175.667 66.2903 175.935 66.5679 176.256 66.5679H177.727C178.075 66.5679 178.316 66.2903 178.316 65.9564V48.8987C178.316 48.5656 178.075 48.2876 177.727 48.2876Z"
fill="#443D4E" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M142.246 64.4287C142.246 64.0952 141.978 63.8172 141.657 63.8172L135.012 63.8176V58.8027H141.657C141.978 58.8027 142.245 58.553 142.245 58.1916V56.6639C142.245 56.33 141.977 56.0524 141.657 56.0524H135.012V51.0379H141.657C141.977 51.0379 142.245 50.7878 142.245 50.4268V48.8991C142.245 48.5652 141.977 48.2876 141.657 48.2876H134.425C134.424 48.2876 134.424 48.2876 134.424 48.2876H132.952C132.631 48.2876 132.363 48.5652 132.363 48.8987V65.9564C132.363 66.2899 132.631 66.5679 132.952 66.5679H133.59H133.591H141.657C141.978 66.5679 142.246 66.3178 142.246 65.9564V64.4287Z"
fill="#443D4E" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M190.923 64.4287C190.923 64.0952 190.655 63.8172 190.334 63.8172L183.689 63.8176V58.8027H190.334C190.655 58.8027 190.923 58.553 190.923 58.1916V56.6639C190.923 56.33 190.655 56.0524 190.334 56.0524H183.689V51.0379H190.334C190.655 51.0379 190.923 50.7878 190.923 50.4268V48.8991C190.923 48.5652 190.655 48.2876 190.334 48.2876H183.102C183.102 48.2876 183.101 48.2876 183.101 48.2876H181.629C181.308 48.2876 181.041 48.5652 181.041 48.8987V65.9564C181.041 66.2899 181.308 66.5679 181.629 66.5679H182.267H182.268H190.334C190.655 66.5679 190.923 66.3178 190.923 65.9564V64.4287Z"
fill="#443D4E" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M216 64.4287C216 64.0952 215.732 63.8172 215.411 63.8172L208.766 63.8176V58.8027H215.411C215.732 58.8027 216 58.553 216 58.1916V56.6639C216 56.33 215.732 56.0524 215.411 56.0524H208.766V51.0379H215.411C215.732 51.0379 216 50.7878 216 50.4268V48.8991C216 48.5652 215.732 48.2876 215.411 48.2876H208.179C208.179 48.2876 208.178 48.2876 208.178 48.2876H206.706C206.385 48.2876 206.118 48.5652 206.118 48.8987V65.9564C206.118 66.2899 206.385 66.5679 206.706 66.5679H207.344H207.345H215.411C215.732 66.5679 216 66.3178 216 65.9564V64.4287Z"
fill="#443D4E" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M147.053 52.8867V53.9302C147.053 54.7266 147.794 55.1931 148.64 55.5502L152.157 57.0877C153.48 57.6922 154.405 58.7624 154.405 60.4099V62.3592C154.405 63.9792 151.126 66.6978 149.38 66.6978C148.191 66.6978 146.392 65.8191 144.991 65.0227C144.673 64.8583 144.462 64.4732 144.647 64.0343L145.097 63.1006C145.282 62.7163 145.678 62.6337 146.022 62.826C147.159 63.4302 148.666 64.1716 149.38 64.1716C150.174 64.1716 151.84 62.7714 151.84 61.9749V60.7671C151.84 59.8334 151.152 59.3118 150.201 58.9276L146.921 57.4995C145.652 56.9504 144.488 55.8247 144.488 54.2873V52.5025C144.488 50.7176 147.952 48.1367 149.619 48.1367C150.729 48.1367 152.528 48.9878 153.718 49.647C154.088 49.8394 154.194 50.2787 154.034 50.6079L153.612 51.5416C153.48 51.8708 153.056 51.9809 152.686 51.8157C151.787 51.3768 150.28 50.6629 149.619 50.6629C148.852 50.6629 147.053 51.9809 147.053 52.8867Z"
fill="#443D4E" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M198.697 50.6769H196.101V56.7891H198.723C199.82 56.7891 201.105 54.7612 201.105 53.6774C201.105 52.6219 199.767 50.6769 198.697 50.6769ZM198.589 59.1781H196.101V65.9572C196.101 66.3182 195.86 66.5679 195.485 66.5679H194.068C193.746 66.5679 193.452 66.3182 193.452 65.9572V49.5656C193.452 48.927 194.175 48.2876 194.763 48.2876H199.045C200.997 48.2876 203.589 51.4501 203.589 53.5335C203.589 54.9229 202.416 57.0109 201.158 57.8171C202.175 58.3723 203.566 59.845 203.566 61.2064V65.9572C203.566 66.2903 203.299 66.5679 202.978 66.5679H201.506C201.185 66.5679 200.918 66.2903 200.918 65.9572V61.6229C200.918 60.6504 199.607 59.1781 198.589 59.1781Z"
fill="#443D4E" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M161.716 50.6769H159.121V56.7891H161.743C162.84 56.7891 163.971 54.7612 163.971 53.6774C163.971 52.6219 162.786 50.6769 161.716 50.6769ZM161.61 59.1781H159.121V65.9572C159.121 66.3182 158.88 66.5679 158.505 66.5679H157.087C156.766 66.5679 156.472 66.3182 156.472 65.9572V49.5656C156.472 48.927 157.195 48.2876 157.783 48.2876H162.064C164.017 48.2876 166.49 51.5486 166.49 53.632C166.49 55.0214 165.499 56.8899 164.354 57.9706C163.791 58.5018 162.897 59.1781 161.61 59.1781Z"
fill="#443D4E" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M112.311 66.7299C110.549 66.7299 107.253 64.4158 107.253 62.4189V49.0165C107.253 48.6838 107.545 48.4085 107.867 48.4085H109.279C109.625 48.4085 109.891 48.6838 109.891 49.0165V62.0598C109.891 63.0308 111.483 64.2076 112.311 64.2076C113.138 64.2076 114.741 62.8819 114.741 61.9109V48.868C114.741 48.5349 114.981 48.26 115.303 48.26H116.767C117.09 48.26 117.382 48.5349 117.382 48.868V62.2704C117.382 64.2076 114.071 66.7299 112.311 66.7299Z"
fill="#443D4E" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M125.062 64.1788H122.557V58.0666H125.088C126.185 58.0666 127.47 59.988 127.47 61.0714C127.47 62.1272 126.132 64.1788 125.062 64.1788ZM122.557 50.6768H125.062C126.132 50.6768 127.47 52.2681 127.47 53.324C127.47 54.4074 126.185 56.1767 125.088 56.1767H122.557V50.6768ZM127.644 57.1221C128.864 56.2884 130.092 54.6687 130.092 53.324C130.092 51.2406 127.363 48.2878 125.41 48.2878H121.219C120.631 48.2878 119.908 48.9269 119.908 49.5655V56.2632V65.2897V65.9571C119.908 66.3185 120.202 66.5678 120.523 66.5678H121.219H121.941H125.5C127.453 66.5678 130.092 63.1551 130.092 61.0714C130.092 59.7274 128.864 57.965 127.644 57.1221Z"
fill="#443D4E" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M99.0715 57.5287L104.897 50.5239C105.107 50.2715 105.1 49.8981 104.837 49.6619L103.723 48.6635C103.479 48.4452 103.102 48.4739 102.892 48.7263L97.798 54.8517V48.8988C97.798 48.5654 97.5572 48.2874 97.2095 48.2874H95.7377C95.4165 48.2874 95.1491 48.5654 95.1491 48.8988V65.957C95.1491 66.29 95.4165 66.5677 95.7377 66.5677H97.2095C97.5572 66.5677 97.798 66.29 97.798 65.957V60.2058L102.892 66.3315C103.102 66.5836 103.479 66.6123 103.723 66.3944L104.837 65.3959C105.1 65.1594 105.107 64.7859 104.897 64.5339L99.0715 57.5287Z"
fill="#443D4E" />
<defs>
<filter id="filter0_dd" x="0" y="0" width="472" height="278" filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha" />
<feOffset dy="4" />
<feGaussianBlur stdDeviation="4" />
<feColorMatrix type="matrix" values="0 0 0 0 0.141176 0 0 0 0 0.180392 0 0 0 0 0.258824 0 0 0 0.06 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha" />
<feOffset dy="8" />
<feGaussianBlur stdDeviation="8" />
<feColorMatrix type="matrix" values="0 0 0 0 0.141176 0 0 0 0 0.180392 0 0 0 0 0.258824 0 0 0 0.05 0" />
<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
</filter>
<filter id="filter1_dd" x="250" y="138" width="211" height="140" filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha" />
<feOffset dy="10" />
<feGaussianBlur stdDeviation="25" />
<feColorMatrix type="matrix" values="0 0 0 0 0.133333 0 0 0 0 0.168627 0 0 0 0 0.243137 0 0 0 0.1 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha" />
<feOffset dy="8" />
<feGaussianBlur stdDeviation="8" />
<feColorMatrix type="matrix" values="0 0 0 0 0.129412 0 0 0 0 0.168627 0 0 0 0 0.239216 0 0 0 0.2 0" />
<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
</filter>
<linearGradient id="paint0_linear" x1="303.115" y1="59.1106" x2="429.089" y2="224.731"
gradientUnits="userSpaceOnUse">
<stop stop-color="#D8F2F4" stop-opacity="0.62" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint1_linear" x1="107.812" y1="37.3112" x2="212.53" y2="219.395"
gradientUnits="userSpaceOnUse">
<stop stop-color="#D8F2F4" stop-opacity="0.62" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint2_linear" x1="94.923" y1="-20" x2="94.923" y2="284.407" gradientUnits="userSpaceOnUse">
<stop stop-color="#E2F5F7" stop-opacity="0.39" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint3_linear" x1="301.772" y1="178" x2="301.772" y2="216.723"
gradientUnits="userSpaceOnUse">
<stop stop-opacity="0.01" />
<stop offset="1" stop-opacity="0.1" />
</linearGradient>
<clipPath id="clip0">
<rect width="360" height="48" fill="white" transform="translate(56 174)" />
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 11 KiB