index.html

<!DOCTYPE html>
<html>
    <head>
        <title>随机图片api</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style>
            html,
            body {
                margin: 0;
                color: #424242;
                font-weight: 300;
                font-family: "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "PingFang SC", "Microsoft YaHei",
                    "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", "sans-serif";
                font-size: 16px;
            }

            * {
                box-sizing: border-box;
            }

            header {
                padding: 40vh 0 8vh 0;
                text-align: center;
                font-weight: 100;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                height: 100vh;
                overflow: hidden;
                background: #a0e5e4;
            }

            h1,
            h2,
            h3 {
                font-weight: 400 !important;
                font-weight: bold;
                margin: 0;
            }

            h1 {
                font-size: 3.5rem;
            }

            h2 {
                font-size: 2rem;
                font-weight: 300;
            }

            h3 {
                font-size: 1.5rem;
                font-weight: 300;
            }

            #scroll-down {
                background-color: transparent;
                margin-top: 2rem;
                width: 2rem;
                height: 2rem;
                border-radius: 50%;
                border: 2px solid #424242;
                cursor: pointer;
                animation: bounce 2s infinite 2s;
            }

            #scroll-down::before {
                display: block;
                content: "";
                transform: rotate(-45deg) translate(0.15rem, 0.15rem);
                width: 0.4rem;
                height: 0.4rem;
                border: 2px solid #424242;
                border-width: 0px 0 2px 2px;
            }

            a {
                text-decoration: none;
                color: #79c37c;
            }

            main {
                padding: 1vw;
            }

            section {
                padding: 1rem;
            }

            footer {
                padding: 1vh;
                text-align: center;
                background-color: #aaaaaa;
            }

            footer a {
                color: #ddd;
            }

            footer a:hover {
                text-decoration: underline;
            }

            @keyframes bounce {
                0%,
                100%,
                20%,
                50%,
                80% {
                    transform: translateY(0);
                }

                40% {
                    transform: translateY(-10px);
                }

                60% {
                    transform: translateY(-5px);
                }
            }

            pre {
                background-color: #f5f5f5;
                padding: 2rem 1rem;
                border-radius: 4px;
                overflow: auto;
            }
        </style>
    </head>

    <body>
        <header>
            <section>
                <h1>随机图片API</h1>
                <h3>说明文档</h3>
            </section>
            <button id="scroll-down"></button>
        </header>
        <main>
            <section>
                <h2><strong>假定 API 部署到 https://example.net/</strong></h2>
                <small>php</small>
                <p>
                    访问
                    <a href="https://example.net/api">https://example.net/api</a>
                    ，跳转至图片地址
                </p>
                <p>
                    访问
                    <a href="https://example.net/api/?id=数字">https://example.net/api/?id=数字</a>
                    ，跳转至指定图片
                </p>
                <p>
                    示例
                    <a href="https://example.net/api/?type=json&id=3">https://example.net/api/?id=3</a>
                </p>
                <p>
                    示例
                    <a href="https://example.net/api/?type=json&id=3">https://example.net/api/?id=3&json</a>
                </p>
            </section>
            <section>
                <h2>
                    <strong>
                        访问
                        <a href="https://example.net/api/?raw">https://example.net/api/?raw</a>
                    </strong>
                </h2>
                <p>服务器读取后输出，默认关闭</p>
            </section>
            <section>
                <h2>
                    <strong>
                        访问
                        <a href="https://example.net/api/?json">https://example.net/api/?json</a>
                    </strong>
                </h2>
                <p>输出json</p>
                <pre>
{"id":3,url":"https://z3.ax1x.com/2021/08/19/fqDucQ.png"}   
</pre
                >
            </section>
        </main>
        <script>
            document.querySelector("main").innerHTML = document
                .querySelector("main")
                .innerHTML.replace(/https:\/\/example.net/g, location.origin);

            document.getElementById("scroll-down").addEventListener("click", function () {
                document.querySelector("main").scrollIntoView({
                    behavior: "smooth",
                });
            });
        </script>
        <footer>
            <p>
                <a href="https://github.com/yieldray/Random-Picture">Source Code</a>
            </p>
        </footer>
    </body>
</html>