website/layouts/index.html

{{ define "main" }}
{{ $data := index .Site.Data .Site.Language.Lang }}
<div class="shadow"></div>
<section class='section-1'>
  {{ with .Params.section1 }}
  <div class="common-layout">
    <div>
      <p class='p1'>{{ .title | safeHTML }}</p>
      <h1>{{ .topic | safeHTML }}</h1>
      <p class='p2'>{{ .content | safeHTML }}</p>
      {{ partial "downloadButton" . }}
    </div>
    <div class="img1-div">
      <img class='img1' src="/images/home/53.png" id='video' alt="{{ i18n " kubesphere console screenshot"}}">
      <img class='play' src="/images/videos/play-b.svg" alt="play">
    </div>

    <img class='img2' src="/images/home/left.svg" alt="{{ i18n " background image"}}">
    <img class='img4' src="/images/home/46.svg" alt="{{ i18n " background image"}}">
  </div>
  <img class='img1' src="/images/home/bg.png" alt="{{ i18n " background image"}}">
  <img class='img2' src="/images/home/12-3.png" alt="{{ i18n " background image"}}">
  <img class='img3' src="/images/home/2.svg" alt="{{ i18n " background image"}}">
  {{ end }}
</section>

<section class="section-2">
  {{ with .Params.section2 }}
  <div class="common-layout">
    <h2 class="title-black-h2">{{ .title | safeHTML }}</h2>
    <p class="title-p">{{ .content | safeHTML }}</p>
    <ul>
      {{ range .children }}
      <li class="common-top-inline">
        <img src="{{ .icon }}" alt="{{ .name }}">
        <h3 class="title-black-h3 ">{{ .name | safeHTML }}</h3>
        <p class="common-center-p">{{ .content | safeHTML }}</p>
      </li>
      {{ end }}
    </ul>
  </div>
  {{ end }}
</section>

<section class='section-3'>
  {{ with .Params.section3 }}
  <div class="common-layout">
    <h2 class="title-black-h2">{{ .title | safeHTML }}</h2>
    <p class="title-p">{{ .content | safeHTML }}</p>
    <div class='menu-div common-flex-layout'>
      <ul>
        {{ range $index, $element := .children }}
        <li class='{{ if eq $index 0 }} active {{ end }} left-li' data-index='{{ $index }}'>{{ .name }}</li>
        {{ end }}
      </ul>
      {{ range .children }}
      <div class='right-div'>
        <div class='top'>
          <h3>💁🏼‍♂️{{ .name }}</h3>
          <p>{{ .content | safeHTML }}</p>
        </div>
        <ul>
          {{ range .children }}
          <li>{{ .content | safeHTML }}</li>
          {{ end }}
        </ul>
        <img src="{{ .icon | relURL }}" alt="{{ .name }}">
      </div>
      {{ end }}

    </div>
  </div>
  {{ end }}
</section>

<section class='section-4'>
  {{ with .Params.section4 }}
  <img class='bg-1' src="/images/home/section4-left.png" alt="{{ i18n " background image"}}">
  <img class='bg-2' src="/images/home/section4-right.svg" alt="{{ i18n " background image"}}">
  <div class="common-layout">
    <div>
      <h2>{{ .title }}</h2>
      <p class="common-p">{{ .content | safeHTML }}</p>
      <ul>
        {{ range .children }}
        <li>
          <img src="{{ .icon }}" alt="{{ .name }}">
          <div>
            <h3 class="title-white-h3">{{ .name }}</h3>
            <p class="common-p">{{ .content | safeHTML }}</p>
          </div>
        </li>
        {{ end }}
      </ul>
    </div>

    <ul>
      {{ range .features}}
      <li>
        <div>
          <div class='top-line {{ .color }}'></div>
          <div class='img-span-div'>
            <img class="common-middle-inline" src="{{ .icon }}" alt="{{ .name }}">
            <span class="common-middle-inline">{{ .name }}</span>
          </div>
          <p class="common-p">{{ .content | safeHTML }}</p>
        </div>
        <div class='middle-line'></div>
        {{ if .check }}
        <span class="common-green-a">{{ i18n "Coming Soon" }} →</span>
        {{ else }}
        <a class="common-green-a" href="{{ .link }}" target="_blank" rel="noopener noreferrer">{{ i18n "Read More" }}
          →</a>
        {{ end }}
      </li>
      {{ end }}
    </ul>
  </div>
  {{ end }}
</section>

<section class='section-5'>
  {{ with .Params.section5 }}
  <div class="common-layout">
    <h2 class="title-black-h2">{{ .title }}</h2>
    <div>
      {{ with .frontEnd }}
      <div class='front-div common-top-inline'>
        <h3 class="title-black-h3">{{ .title }}</h3>
        <p>{{ .project }}</p>
        {{ $alt := .project }}
        <ul>
          {{ range .children }}
          <li>
            <img src="{{ .icon }}" alt="{{ $alt }}">
          </li>
          {{ end }}
        </ul>
      </div>
      {{ end }}
      {{ with .backEnd }}
      <div class='back-div common-top-inline'>
        <h3 class="title-black-h3">{{ .title}}</h3>
        <div class='group'>
          <p>{{ .project }}</p>
          <ul>
            {{ range .group }}
            <li>{{ .name }}</li>
            {{ end }}
          </ul>
        </div>
        <div class='image'>
          <img src="/images/home/applications.png" alt="{{ .project }}">
          <img src="/images/home/applications.png" alt="{{ .project }}">
        </div>
      </div>
      {{ end }}
    </div>
  </div>
  {{ end }}
</section>

<section class='section-6'>
  {{ with .Params.section6 }}
  <div class="common-layout">
    <h2 class="title-black-h2">{{ .title }}</h2>
    <p class="title-p">{{ .content | safeHTML }}</p>
    <ul class="common-flex-layout">
      {{ $alt := .title }}
      {{ range .children }}
      <li>
        <img src="{{ .icon }}" alt="{{ $alt }}">
      </li>
      {{ end }}
    </ul>
    <div>
      <a href="{{ .btnLink }}"><button>{{ .btnContent }}</button></a>
    </div>
    <div class='link-div'>
      <a class="common-black-a" href="{{ .link }}" target="_blank" rel="noopener noreferrer">{{ .linkContent }}</a>
    </div>
    <a class='join-div' href="{{ .joinLink }}">
      <p class='p1'>{{ .joinTitle }}</p>
      <p class='p2'>{{ .joinContent }}</p>
      <img src="/images/home/join-right.svg" alt="{{ i18n " background image"}}">
    </a>
    <img class='bottom-img' src="{{ .image }}" alt="cncf">
  </div>
  <img class='bg-1' src="/images/home/section6-left.svg" alt="{{ i18n " icon" }}">
  <img class='bg-2' src="/images/home/section6-right.svg" alt="{{ i18n " icon" }}">
  {{ end }}
</section>

<!-- {{ if eq .Site.Language.Lang "zh"}}
<div class="meet-div">
  <img class="close" src="/images/home/close.svg" alt="close">
  <img src="/images/home/group-18.svg" alt="{{ i18n "icon" }}">
  <img class="img-2" src="/images/home/group-16.svg" alt="{{ i18n "icon" }}">
  <p>12.19 北京 · aiospace机遇空间</p>
  <img class="img-3" src="/images/home/二维码.jpg" alt="二维码">
  <img class="img-4" src="/images/home/group-19.svg" alt="{{ i18n "icon" }}">
</div>
{{ end }} -->

<div class="join-us">
  <img class="close" src="/images/home/close.svg" alt="close">
  <img class="modalImage" src="/images/home/modal-content.svg" alt="icon"></img>
  <h2>{{ i18n "Join Us" }}</h2>
  <p>{{ i18n "Join Us Content" }}</p>
  <div>
    <div class="slack">
      <img src="/images/home/slack.svg" alt="slack"></img>
      <p>
        <a href="{{ .Site.Params.slackLink }}" target="_blank">
          {{ i18n "Join Slack" }}
        </a>
      </p>
    </div>
    <div class="wechat">
      <img src="/images/home/wechat.svg" alt="wechat"></img>
      <p>{{ i18n "Join Wechat" }}</p>
    </div>
  </div>
</div>

<div class="modal-for-video">
  <img class="close-video" alt="close icon" src="/images/videos/close.png">
  <div class="video-div" data-language='{{ .Site.Language.Lang }}'>
    <video class="start1" src="" poster="/images/home/poster.png" controls autoplay></video></video>
    <iframe title="video" class="start2" src=""></iframe>
  </div>

</div>






<script>

  var controlVideo = function () {

    var startVideo = $('div.img1-div')
    var shadow = $('div.shadow')
    var video = $('div.modal-for-video')
    var start1 = $('video.start1')
    var start2 = $('iframe.start2')
    var closeVideo = $('img.close-video')
    var language = $('div.video-div').data('language')
    var height = document.body.scrollHeight + 'px'

    let openVideo = function () {
      if (language == 'zh') {
        start2.css('display', 'none')
        start1.attr('src', "https://kubesphere-community.pek3b.qingstor.com/videos/kubesphere-demo-cn.mp4")
        video.css('height', 'auto')

      }
      else if (language == 'en') {
        start1.css('display', 'none')
        start2.attr('src', "https://www.youtube.com/embed/YxZ1YUv0CYs")
      }

      shadow.show()
      shadow.css('height', `${height}`)

      video.show();
      closeVideo.show();

    }

    let endVideo = function () {
      closeVideo.hide()
      start1.attr('src', '')
      start2.attr('src', '')
      shadow.hide()
      video.hide()
    }

    shadow.hide();

    startVideo.click(function () {
      openVideo()
    })

    closeVideo.click(function () {
      endVideo()
    }
    )
    shadow.click(function () {
      endVideo()
    })

  }

  var bindMouseLeftLi = function () {
    $('.section-3 .left-li').mouseenter(function () {
      var index = Number($(this).data('index'))
      $('.left-li').removeClass('active')
      $(this).addClass('active')
      $('.section-3 .right-div').hide().eq(index).show()
    })
  }

  var bindResize = function () {
    var screenWidth = $(window).width()
    if (screenWidth <= 768) {
      $('.image').find('img').attr('src', "/images/home/applications2.png")
    }
    $(window).resize(function () {
      var screenWidth = $(window).width()
      if (screenWidth <= 768) {
        $('.image').find('img').attr('src', "/images/home/applications2.png")
      } else {
        $('.image').find('img').attr('src', "/images/home/applications.png")
      }
    })
  }

  var bindCount = function () {
    setTimeout(function () {
      $('.join-us').fadeIn()
    }, 10000)
  }

  var bindClose = function () {
    $('.join-us .close').click(function (e) {
      e.stopPropagation()
      $('.join-us').fadeOut()
    })
  }

  var bindMeet = function () {
    $('.meet-div').click(function () {
      window.open('https://kubesphere.com.cn/forum/d/2712-meetup-topic')
    })
  }

  controlVideo()
  bindMouseLeftLi()
  bindResize()
  bindCount()
  bindClose()
  bindMeet()
</script>
{{ end }}