{% extends "base.html" %}

<!-- Render landing page under tabs -->
{% block tabs %}
{{ super() }}

<!-- Additional styles for landing page -->
<style>

  /* Application header should be static for the landing page */
  .md-header {
    position: initial;
  }

  /* Remove spacing, as we cannot hide it completely */
  .md-main__inner {
    margin: 0;
  }

  /* Hide main content for now */
  .md-content {
    display: none;
  }

  /* Hide table of contents */
  @media screen and (min-width: 60em) {
    .md-sidebar--secondary {
      display: none;
    }
  }

  /* Hide navigation */
  @media screen and (min-width: 76.25em) {
    .md-sidebar--primary {
      display: none;
    }
  }
</style>

<!-- landing page for landing page -->
<section class="tx-container">
  <div class="md-grid md-typeset">
    <div class="tx-landing">
      <!-- landing image -->
      <div class="tx-landing__image">
        <script src="../mkdocs/js/lottie-player.js"></script>
        <lottie-player id="lottieAnimation" background="transparent"
                       style="max-width: 100%; height: auto;"
                       speed="1" loop autoplay>
        </lottie-player>
        <script>
          let animation = document.getElementById("lottieAnimation");
          animation.load("../mkdocs/assets/animations/ml.json");
        </script>
      </div>

      <!-- landing content -->
      <div class="tx-landing__content">
        <h1>{{page.title}}</h1>
        <p>FATE Flow 基于
          <ul>
            <li>共享状态调度架构</li>
            <li>多方安全通信</li>
          </ul>
        </p>
        <p>实现了端到端的联邦学习作业调度生产级服务，支持
          <ul>
            <li>数据接入</li>
            <li>任务组件注册中心</li>
            <li>联合作业&任务调度</li>
            <li>多方资源协调</li>
            <li>数据流动追踪</li>
            <li>作业实时监测</li>
            <li>联合模型注册中心</li>
            <li>多方合作权限管理</li>
          </ul>
        </p>
        <a href="/tutorial" title="Tutorial" class="md-button"> Learn More</a>
        <a href="https://github.com/FederatedAI/FATE-Flow" title="GitHub" class="md-button">GitHub</a>
      </div>
    </div>
  </div>
</section>
{% endblock %}

<!-- Content -->
{% block content %}{% endblock %}

<!-- Application footer -->
{% block footer %}{% endblock %}