// React
import React from "react";


// UI
import HelpExample from "../images/help/wallpaper-pr-example.jpg";
import HelpRequire from "../images/help/wallpaper-pr-require.jpg";


// Components
function Wallpaper() {
  return (
    <main>
      <section className="header">
        <h1>随机动漫壁纸</h1>
        <h2>生成适合 Single 主题的白底动漫壁纸</h2>
      </section>
      <article className="post">
        <h3>说明：</h3>
        <p>本 API 的所有图片均进行了公开，欢迎前往仓库 <a href="https://github.com/Dreamer-Paul/Anime-Wallpaper" target="_blank">Anime-Wallpaper</a> 提交 PR，完善资源。Commit 的说明上最好带上对应角色的来源～</p>
        <blockquote>你既可以将仓库图片下载自用或创建自己的随机图片 API，也可以直接使用本 API 提供的链接插入到自己的网页上，也顺带让你学会了用 Git 提交代码，不是很有意思嘛。</blockquote>
        <p>提 PR 增加资源需要注意一些细节问题，先做了解，会让你的提交过程更加顺利呢！本仓库不接受存在以下问题的提交，保罗有拒绝合并的权限哦（当然，你也可以重新修改后再次提交）</p>
        <ul>
          <li>动作/衣着等尺度较大的图片</li>
          <li>尽可能以日漫女或无性角色为主（暂时没有作品上的限制）</li>
          <li>人物主体占画面主体的比例偏高（应小于 50%）</li>
          <li>人物主体离画面顶部、左右侧或底部太靠近（网站顶部有菜单栏就会被“切掉”了）</li>
          <li>可参考以下图片示例，画布尺寸需为 <code>1920 x 1080</code> 像素，<code>.jpg</code> 格式。</li>
        </ul>
        <p><img src={HelpExample} style={{ border: "1px solid #ddd" }} alt="提交须知" /></p>
        <p><img src={HelpRequire} alt="提交须知" /></p>
        <p>Commit 说明可参考以下示例：</p>
<pre><code>Add 5 Images

增加了《轻音少女》阿梓喵、《原神》可莉的图片
</code></pre>

        <h3>使用方法：</h3>
        <p>调用地址 <code>https://api.paugram.com/wallpaper/</code> 可自动跳转到对应的壁纸（由于运营成本限制，目前本 API 借助 图床/CDN 等平台托管图片。欢迎给予资源赞助~）</p>
        <p>如果您已开始使用本 API 服务，则默认视为遵守 <a href="https://api.paugram.com/notice">本约定</a>。</p>
        <p>图片版权归原作者所有，本站不为滥用本 API 进行违规操作者承担责任。</p>

        <h3>参数：</h3>
        <div className="ks-table text-nowrap">
          <table>
            <thead>
              <tr>
                <td>参数</td>
                <td>可选值</td>
                <td>描述</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>source</td>
                <td><code>sm</code> <code>cp</code> <code>sina</code> <code>paul</code></td>
                <td>图片源，如留空则默认采用 sm.ms 源</td>
              </tr>
              <tr>
                <td>category（施工中）</td>
                <td><code>us</code> <code>jp</code> <code>cn</code></td>
                <td>图片分类，可按不同国家和类别选择</td>
              </tr>
            </tbody>
          </table>
        </div>

        <h3>图片源：</h3>
        <div className="ks-table text-nowrap">
          <table>
            <thead>
              <tr>
                <td>参数名称</td>
                <td>状态</td>
                <td>图片源描述</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>sm</td>
                <td><em className="green">可用</em></td>
                <td>资源较少！sm.ms 图床，国外速度较快，部分浏览器会阻止访问</td>
              </tr>
              <tr>
                <td>gt</td>
                <td><em className="green">可用</em></td>
                <td>Gitee Pages 服务托管，服务器位于国内，速度稳定</td>
              </tr>
              <tr>
                <td>sina</td>
                <td><em className="green">可用</em></td>
                <td>资源较少！新浪微博相册，国内速度较快，已更换新地址</td>
              </tr>
              <tr>
                <td>gh</td>
                <td><em className="green">可用</em></td>
                <td>存放在 GitHub 上的图片资源，基于 JSDelivr 托管，速度非常理想</td>
              </tr>
            </tbody>
          </table>
        </div>

        <h3>图片分类（施工中）：</h3>
        <div className="ks-table text-nowrap">
          <table>
            <thead>
              <tr>
                <td>参数名称</td>
                <td>状态</td>
                <td>分类描述</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td><em className="red">不可用</em></td>
                <td>白底动漫插图</td>
              </tr>
              <tr>
                <td>2</td>
                <td><em className="red">不可用</em></td>
                <td>透明底动漫插图</td>
              </tr>
              <tr>
                <td>3</td>
                <td><em className="red">不可用</em></td>
                <td>随机底动漫壁纸</td>
              </tr>
            </tbody>
          </table>
        </div>

        <h3>示例：</h3>
        <p>使用 sm.ms 图片源</p>
        <pre><code>https://api.paugram.com/wallpaper/?source=sm</code></pre>
        <p>使用新浪图片源，并选择美漫图片分类</p>
        <pre><code>https://api.paugram.com/wallpaper/?source=sina&category=us</code></pre>
        <p>在网页背景上使用本 API</p>
<pre className="language-css"><code>{`body{
  background: url("https://api.paugram.com/wallpaper/") center/cover no-repeat;
}`}
</code></pre>
        <p>在网页背景上使用本 API（伪元素半透明版）</p>
<pre className="language-css"><code>{`body:before{
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: .3;
  z-index: -1;
  content: "";
  position: fixed;
  background: url(https://api.paugram.com/wallpaper/) center/cover;
}`}
</code></pre>

        <h3>测试：</h3>
        <p>使用 <code>img</code> 标签引用图片</p>
        <p><img src={`//${location.host}/api/wallpaper`} style={{ border: "1px solid #ddd" }} alt="示例" /></p>

        <h3>感谢：</h3>
        <ul>
          <li><a href="https://sm.ms" rel="nofollow" target="_blank">SM.MS</a></li>
          <li><a href="https://github.com/Dreamer-Paul/Anime-Wallpaper" rel="nofollow" target="_blank">GitHub</a></li>
          <li><a href="https://www.jsdelivr.com" rel="nofollow" target="_blank">JSDelivr</a></li>
          <li><a href="https://gitee.com" rel="nofollow" target="_blank">Gitee Pages</a></li>
        </ul>
      </article>
    </main>
  )
}

export default Wallpaper;
