<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title>DailyHot API</title> <link rel="shortcut icon" href="./favicon.svg" type="image/x-icon" /> <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/6.0.0/css/all.min.css" /> <style> :root { --text-color: #000; --text-color-gray: #888; --text-color-hover: #fff; --icon-color: #444; } html.dark-mode { --text-color: #fff; --text-color-gray: #888; --text-color-hover: #3c3c3c; --icon-color: #cbcbcb; } * { margin: 0; padding: 0; -webkit-user-select: none; user-select: none; } html { height: 100%; } body { background-color: var(--text-color-hover); color: var(--text-color); font-family: "PingFang SC", "Open Sans", "Microsoft YaHei", sans-serif; transition: background-color 0.5s, color 0.5s; display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100%; } .dark-mode body { background-color: #2a2a2a; } main { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } a { text-decoration: none; color: var(--text-color-gray); transition: all 0.5s ease; } a:hover { color: var(--text-color); } .ico { margin: 4rem 2rem; font-size: 6rem; color: var(--text-color-gray); } .title { font-size: 2rem; font-weight: bold; } .text { margin: 1rem; } .control button { background-color: var(--text-color-hover); border: var(--text-color) solid; border-radius: 4px; padding: 0.5rem 1rem; transition: all 0.5s ease; margin: 1rem 0.2rem; color: var(--text-color); cursor: pointer; } .control button:hover { border: var(--text-color) solid; background: var(--text-color); color: var(--text-color-hover); } .control button i { margin-right: 6px; } footer { line-height: 1.75rem; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 140px; } footer .social { color: var(--icon-color); font-size: 15px; display: flex; align-items: center; cursor: pointer; } footer .social i { margin: 0 12px; } footer .point::before { content: "·"; color: var(--text-color-gray); } .power, .icp { font-size: 14px; } </style> </head> <body> <main> <div class="ico"><i class="fa-solid fa-code"></i></div> <div class="title">DailyHot API</div> <div class="text">服务已正常运行</div> <div class="control"> <button onclick="clickFunction()"> <i class="fa-solid fa-vial"></i> <span>测试接口</span> </button> <button onclick="window.open(`https://www.apifox.cn/apidoc/shared-ed2f1803-746b-42bb-8321-b0f0bbc6634c`)" > <i class="fa-solid fa-book"></i> <span>接口文档</span> </button> </div> </main> <footer> <div class="social"> <i class="fa-brands fa-github" onclick="socialJump('github')"></i> <div class="point"></div> <i class="fa-solid fa-house" onclick="socialJump('home')"></i> <div class="point"></div> <i class="fa-solid fa-envelope" onclick="socialJump('email')"></i> </div> <div class="power"> Copyright © 2020 <script> document.write(" - " + new Date().getFullYear()); </script> <a href="https://imsyy.top/" target="_blank">無名</a> </div> <div class="icp"> <a href="https://beian.miit.gov.cn/" target="_blank">豫ICP备2022018134号-1</a> </div> </footer> <script> // 跟随系统主题 const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)"); const toggleDarkMode = (darkModeMediaQuery) => { if (darkModeMediaQuery.matches) { document.documentElement.classList.add("dark-mode"); } else { document.documentElement.classList.remove("dark-mode"); } }; darkModeMediaQuery.addListener(toggleDarkMode); toggleDarkMode(darkModeMediaQuery); // 按钮事件 const clickFunction = () => { window.location.href = "/bilibili"; }; // 社交链接跳转 const socialJump = (type) => { switch (type) { case "github": window.location.href = "https://github.com/imsyy/"; break; case "home": window.location.href = "https://www.imsyy.top/"; break; case "email": window.location.href = "mailto:one@imsyy.top"; break; default: break; } }; </script> </body> </html>