<?php
//  ---------------------------------------------------------------------------------
//    _____   _             _                   _   _____
//   |  __ \ | |           | |    /\           (_) |  __ \
//   | |__) || |__    __ _ | |   /  \    _ __   _  | |__) |_ __  ___
//   |  ___/ | '_ \  / _` || |  / /\ \  | '_ \ | | |  ___/| '__|/ _ \
//   | |     | | | || (_| || | / ____ \ | |_) || | | |    | |  | (_) |
//   |_|     |_| |_| \__,_||_|/_/    \_\| .__/ |_| |_|    |_|   \___/
//                                      | |
//                                      |_|
//   PhalApi Pro 专业版
//   广州果创网络科技有限公司
//
//  ---------------------------------------------------------------------------------
//
//   一、协议的许可和权利
//    1. 您可以在完全遵守本协议的基础上，将本软件应用于商业用途；
//    2. 您可以在协议规定的约束和限制范围内修改本产品源代码或界面风格以适应您的要求；
//    3. 您拥有使用本产品中的全部内容资料、商品信息及其他信息的所有权，并独立承担与其内容相关的
//       法律义务；
//    4. 获得商业授权之后，您可以将本软件应用于商业用途，自授权时刻起，在技术支持期限内拥有通过
//       指定的方式获得指定范围内的技术支持服务；
//
//   二、协议的约束和限制
//    1. 未获商业授权之前，禁止将本软件用于商业用途（包括但不限于企业法人经营的产品、经营性产品
//       以及以盈利为目的或实现盈利产品）；
//    2. 未获商业授权之前，禁止在本产品的整体或在任何部分基础上发展任何派生版本、修改版本或第三
//       方版本用于重新开发；
//    3. 如果您未能遵守本协议的条款，您的授权将被终止，所被许可的权利将被收回并承担相应法律责任；
//
//   三、有限担保和免责声明
//    1. 本软件及所附带的文件是作为不提供任何明确的或隐含的赔偿或担保的形式提供的；
//    2. 用户出于自愿而使用本软件，您必须了解使用本软件的风险，在尚未获得商业授权之前，我们不承
//       诺提供任何形式的技术支持、使用担保，也不承担任何因使用本软件而产生问题的相关责任；
//    3. 广州果创网络科技有限公司不对使用本产品构建的商城中的内容信息承担责任，但在不侵犯用户隐
//       私信息的前提下，保留以任何方式获取用户信息及商品信息的权利；
//
//   有关本产品最终用户授权协议、商业授权与技术服务的详细内容，均由广州果创网络科技有限公司独家
//   提供。广州果创网络科技有限公司拥有在不事先通知的情况下，修改授权协议的权力，修改后的协议对
//   改变之日起的新授权用户生效。电子文本形式的授权协议如同双方书面签署的协议一样，具有完全的和
//   等同的法律效力。您一旦开始修改、安装或使用本产品，即被视为完全理解并接受本协议的各项条款，
//   在享有上述条款授予的权力的同时，受到相关的约束和限制。协议许可范围以外的行为，将直接违反本
//   授权协议并构成侵权，我们有权随时终止授权，责令停止损害，并保留追究相关责任的权力。
//
//  ---------------------------------------------------------------------------------

// 搜索关键字
$keyword = isset($_GET['keyword']) ? $_GET['keyword'] : '';

//$semanticHost = 'https://cdn.bootcss.com/semantic-ui/2.2.2'; // CDN
$semanticHost = '/semantic'; // 本地


$projectName = $project['name'];

echo <<<EOT
<!DOCTYPE html>
<html lang="en">
<!-- 

  _____   _             _                   _   _____             
 |  __ \ | |           | |    /\           (_) |  __ \            
 | |__) || |__    __ _ | |   /  \    _ __   _  | |__) |_ __  ___  
 |  ___/ | '_ \  / _` || |  / /\ \  | '_ \ | | |  ___/| '__|/ _ \ 
 | |     | | | || (_| || | / ____ \ | |_) || | | |    | |  | (_) |
 |_|     |_| |_| \__,_||_|/_/    \_\| .__/ |_| |_|    |_|   \___/ 
                                    | |                           
                                    |_|                           
 -->

<head>
    <meta charset="utf-8">
    <title>{$projectName}</title>

    <link rel="stylesheet" href="{$semanticHost}/semantic.min.css">
    <link rel="stylesheet" href="{$semanticHost}/components/table.min.css">
    <link rel="stylesheet" href="{$semanticHost}/components/container.min.css">
    <link rel="stylesheet" href="{$semanticHost}/components/message.min.css">
    <link rel="stylesheet" href="{$semanticHost}/components/label.min.css">
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />

    <script src="/static/jquery.min.js"></script>
    <script src="/static/jquery.cookie.min.js"></script>
    <script src="{$semanticHost}/semantic.min.js"></script>
    <style>
       /* @media only screen and (max-width: 767px){
        .ui.container{
          margin: 0!important;
        }
      } */
      .row.page-content-item .flex-item {
        flex: 1;
      }

    </style>
</head>


<body>
EOT;

include API_ROOT . '/src/view/docs/api_menu.php';
$host = isset($_SERVER['HTTP_HOST']) ? $_SERVER['HTTP_HOST'] : 'localhost';

$installTip = file_exists(API_ROOT . '/runtime/_install.lock') ? '' : '<a href="/install" class="negative ui button"  target="_blank">首次使用，请先安装</a>';

echo <<<EOT

<!-- banner -->
<div class="banner">
  <div class="content-wrap-1200 content">
    <p class="greet">欢迎使用{$projectName}</p>
    <p class="info-desc">注册开发者并创建应用后</p>
    <p class="info-desc">即可接入和调用API接口</p>
	  <a class="ui button yellow" href="/platform" target="_blank">开发者注册</a>
    {$installTip}
    <div class="row text-center page-content-item" style="display: flex;">
      <div class="top-container">
        <div class="flex-item">
          <div class="price-item">
            <i class="round-icon" style="background:white url(/images/logo1.png)  no-repeat center center"></i>
            <h4>开放平台</h4>
            <p class="desc">提供给开发者使用的平台，使用对象是内部或外部开发者、合作伙伴、供应商、第三方等，可以管理应用，查看接口权限。</p>
            <a href="/platform" target="_blank">进入开放平台 »</a>
          </div>
          </div>
          <!-- /.flex-item -->
          <!-- aos="fade-up" 加载效果 -->
          <div class="flex-item">
            <div class="price-item">
            <i class="round-icon" style="background:white url(/images/logo2.png) no-repeat center center"></i>
            <h4>开放接口</h4>
            <p class="desc">提供给客户端调用的云端接口服务，使用对象是App、微信小程序、第三方系统等。</p>
            <a href="/docs.php" target="_blank">查看全部接口 »</a>
          </div>
           </div>
          <!-- /.flex-item -->
          <!--  aos="fade-right" 加载效果 直接加入 -->
          <!-- <div class="flex-item">
            <div class="price-item">
            <i style="background:url(http://cd7.yesapi.net/F9B20374B4CBD344913900A437BA56A2_20200225215445_3f9f20fe5ecc6120042ca5cb24c8d361.png)  no-repeat center center / 80%"></i>
            <h4>运营平台</h4>
            <p class="desc">提供给内部职能部门使用的运营平台，使用对象是商务、客服、产品、运营等人员，可以进行日常的运营维护。</p>
            <a href="http://open.yesapi.cn/?r=Pay/Order&product=dev" target="_blank">进入运营平台 »</a>
          </div>
          </div> -->
          <div class="flex-item">
            <div class="price-item">
            <i class="round-icon" style="background:white url(/images/logo3.png) no-repeat center center"></i>
            <h4>管理后台</h4>
            <p class="desc">提供给内部研发团队使用的管理后台，可以对开发者进行审核、权限设置等。使用对象是技术、测试人员、信息部等等。</p>
            <a href="/admin/" target="_blank">进入管理后台 »</a>
          </div>
        </div>
      
      </div>
    </div>
  </div>
</div>

 <div class="guiding-container flex align-item-center">
  <div class="content-wrap-1200">
    <div class="guiding-title">3分钟新手引导</div>

    <div class="guiding-steps">
      <div class="step">
        <i class="round-icon" style="background:url(/images/index1.png) no-repeat center center"></i>
        <div class="content">
          <div class="title">注册账号</div>
          <div class="description">注册开发者账号。</div>
          <a href="/platform" target="_blank">进入开放平台</a>
        </div>
      </div>
      <div class="step">
        <i class="round-icon" style="background:url(/images/index2.png) no-repeat center center"></i>
        <div class="content">
          <div class="title">创建应用</div>
          <div class="description">创建应用并等待审核。</div>
          <a href="/platform" target="_blank">进入开放平台</a>
        </div>
      </div>
      <div class="step">
        <i class="round-icon" style="background:url(/images/index3.png) no-repeat center center"></i>
        <div class="content">
          <div class="title">请求接口</div>
          <div class="description">调用授权的接口。</div>
          <a href="/docs.php" target="_blank">查看开放接口</a>
        </div>
      </div>
    </div>
  </div>
<!--
  <div class="foot-feature">
    <div class="feature-item">
      <i style="background:url(http://cd7.yesapi.net/F9B20374B4CBD344913900A437BA56A2_20200407155709_46dcc4a676c647ff01c32ffe6ef7fca0.png)  no-repeat center center / 80%"></i>
      <h4>接入简单</h4>
      <p class="desc">上手简单，易学易用！HTTP请求+JSON返回的云端接口</p>
     </div>
     <div class="feature-item">
      <i style="background:url(http://cd7.yesapi.net/F9B20374B4CBD344913900A437BA56A2_20200407155652_37ecf213560391d4cc5fc8cf29105626.png)  no-repeat center center / 80%"></i>
      <h4>商业赋能</h4>
      <p class="desc">共享生态红利，为你的项目开发赋新能</p>
     </div>
     <div class="feature-item">
      <i style="background:url(http://cd7.yesapi.net/F9B20374B4CBD344913900A437BA56A2_20200407155613_e0c84903a147c8e1076af4a00f1a1f75.png)  no-repeat center center / 80%"></i>
      <h4>专注平台</h4>
      <p class="desc">专注企业开放平台搭建，助力打造商业闭环</p>
     </div>
  </div>
-->

    </div>
  <div class="guiding-container flex align-item-center">
    <div class="content-wrap-1200">
      <div class="container">
        <div class="guiding-title">如何请求API接口？</div>
        <div class="advice-container">
        <div class="advice-item">
          <!-- <div class="process-circle bg-primary"></div> -->
          <div class="advice-title">第1步、获取你的配置</div>
          <div class="advice-content">登录并获取你的app_key。</div>
        </div>
        <div class="advice-item">
          <!-- <div class="process-circle bg-primary"></div> -->
          <div class="advice-title">第2步、请求接口</div>
          <div class="advice-content">通过GET或POST发起API接口请求，接口地址格式：<br/><code>http://{$host}/api/app.php?s=接口服务 + access_token=访问令牌 + 接口参数</code>。</div>
        </div>
        <div class="advice-item">
          <!-- <div class="process-circle bg-primary"></div> -->
          <div class="advice-title">第3步、解析JSON结果</div>
          <div class="advice-content">用你的开发语言解析JSON结果，实现你的业务逻辑和功能。</div>
        </div>
      </div>
    </div>
  </div>
  </div>
EOT;

?>

<?php
include API_ROOT . '/src/view/docs/api_footer.php';
?>

<style>
  .flex {
    display:flex;
  }
  .align-item-center {
    align-items: center;
  }
  .banner {
    background:rgba(35,35,42,1);
    margin-top: 64px;
    background: url("/images/banner-bg.png") center no-repeat;
    height: 818px;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .content-wrap-1200 {
    width: 100%;
    max-width: 1200px;
  }
  .banner .content-wrap-1200.content {
    padding: 60px 50px;
  }
  .banner p {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    position: relative;
    z-index: 99;
    margin-bottom: 0px;
  }
  .banner .row {
    border-radius: 8px;
    overflow: hidden;
    margin-right: -20px;
    margin-left: -25px;
    margin: -30px;
    overflow: hidden;
  }
  .banner .top-container {
    display: flex;
    position: relative;
    z-index: 9;
    background: rgba(255, 255, 255, 0.85);
  }
  .banner .row:after {
    content: "";
    width: 100%;
    height: 420px;
    filter: blur(8px);
    background: url("/images/banner-bg.png");
    background-size: 1920px 818px;
    background-position: center;
    position: absolute;
    max-width: 1160px;
    z-index: 1;
  }
  
  .banner .greet {
    font-size: 40px;
    text-shadow: 0 0 4px rgba(0,0,0,0.2);
    margin-bottom: 20px;
  }
  .banner .info-desc {
    text-shadow: 0 0 4px rgba(0,0,0,0.2);
    font-weight: 500;
  }
  .banner .button {
    background: #FBAB1B;
    border-radius: 3px;
    cursor: pointer;
    color: #333;
    margin-top: 32px;
    margin-bottom: 76px;
    height: 44px;
    font-size: 18px;
    font-weight: 500;
  }
  .banner .button:hover {
    background: #fffb00;
  }
  .guiding-container {
    justify-content: center;
  }
  .guiding-container .guiding-title {
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 30px;
  }
  .price-item {
      position: relative;
      color: #222222;
      display: flex;
      align-items: flex-start;
      flex-flow: column;
      padding: 115px 46px 46px;
      /* min-width: 350px; */
      height: 420px;
    }
    .guiding-steps {
      display: flex;
      justify-content: center;
    }
    .guiding-steps .step {
      height: 120px;
      width: 40%;
      background: #fff;
      border-radius: 60px;
      box-shadow: -5px 0px 33px rgba(0, 0, 0, 0.07);
      margin-right: -110px;
      padding-left: 118px;
      padding-top: 19px;
      padding-bottom: 19px;
      position: relative;
    }
    .guiding-steps .step:last-child {
      margin-right: 0px;
    }
    .guiding-steps .step .round-icon {
      width: 76px;
      height: 76px;
      border-radius: 76px;
      position: absolute;
      top: 22px;
      left: 26px;
    }
    .guiding-steps .title {
      color: #333;
      font-size: 16px;
      font-weight: 600;
    }
    .price-item h4 {
      font-weight: 500;
      color: #333;
      font-size: 24px;
      margin-bottom: 20px;
    }

    .price-item .round-icon {
      width: 64px;
      height: 64px;
      border-radius: 64px;
      position: absolute;
      top: 42px;
      left: 46px;
    }

    .price-item p {
      text-align: left;
      color: #495057;
    }

    .price-item .desc {
      margin-bottom: 18px;
      font-weight: 500;
      font-size: 18px;
      line-height: 26px;
      color: #666666;
    }

    .price-item a {
      color: #0A73ED !important;
      font-size: 18px;
      position: absolute;
      bottom: 46px;
    }

    .advice-container {
      background: #fff;
      border-radius: 6px;
      margin: 0 auto;
      margin-top: 20px;
      margin-bottom: 40px;
      padding: 0;
      height: 320px;
      width: 620px;
      box-shadow: 0px 0px 37px rgba(0, 0, 0, 0.05);
    }

    .advice-item,.price-item a {
    text-decoration: none;
    font-weight: 500;
}

    .advice-item,.price-item a:hover {
    color: #0a4594;
    text-decoration: none;
}
    .advice-item {
      padding: 0px 60px 0px 60px;
      height: 110px;
      color: #212529;
      position: relative;
      font-weight: 500;
      margin: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .advice-item .advice-title {
      padding: 0px 12px;
      font-size: 16px;
      color: #333;
      border-left: 2px solid #FABC4F;
      line-height: 12px;
      margin-bottom: 14px;
    }

    .advice-item .advice-content {
      padding-left: 14px;
      font-size: 12px;
    }
    
    .process-circle {
    position: absolute;
    left: 40px;
    top: 23px;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #fff;
    font-size: 1.125rem;
}
.process-circle:empty:after {
    content: '';
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
}
.process-circle:empty.bg-primary:after {
    background-color: #0f66dc;
}
.process-circle:empty.bg-primary {
    background: rgba(15,102,220,0.05) !important;
}
.foot-feature {
  display: flex;
}
.feature-item {
      position: relative;
      color: #222222;
      display: flex;
      align-items: flex-start;
      flex-flow: column;
      padding: 0 0px 20px 110px;
    }

    .feature-item i {
      position: absolute;
      width: 70px;
      height: 70px;
      left: 32px;
      top: 27px;
    }

    .feature-item h4 {
      font-weight: 600;
      color: #212529;
    }

    .feature-item p {
      text-align: left;
      color: #495057;
    }
</style>
